/**
 * 偏好调查问卷样式
 */

.ep-preferences-survey {
    margin: 0 auto;
    max-width: 640px;
}

.ep-preferences-intro {
    margin-bottom: 20px;
}

.ep-preferences-intro > p {
    margin: 0;
    font-size: 14px;
    color: var(--ep-text);
}

.ep-skip-btn,
.ep-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: var(--ep-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--ep-border-strong);
    background: var(--ep-surface);
    color: var(--ep-text);
    transition: all var(--ep-transition);
}

.ep-skip-btn:hover {
    border-color: var(--ep-brand);
    color: var(--ep-brand);
}

.ep-clear-btn {
    color: var(--ep-muted);
}

.ep-clear-btn:hover {
    border-color: var(--ep-danger);
    color: var(--ep-danger);
}

/* 底部操作按钮（Skip Survey / Clear Form） */
.ep-preferences-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--ep-border);
}

/* 偏好类别卡片 */
.ep-preference-category {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    background-color: var(--ep-surface);
    box-shadow: var(--ep-shadow-sm);
}

.ep-category-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ep-ink);
    letter-spacing: 0.2px;
}

.ep-category-description {
    margin: 6px 0 12px;
    font-size: 13px;
    color: var(--ep-muted);
}

/* 标题与提示 */
.ep-category-title-with-hints {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.ep-selection-hint {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
}

.ep-selection-hint.single {
    background-color: var(--ep-brand-soft);
    color: var(--ep-brand-dark);
}

.ep-selection-hint.multiple {
    background-color: var(--ep-accent-soft);
    color: var(--ep-accent-deep);
}

.ep-not-required {
    font-size: 12px;
    color: var(--ep-muted);
    font-style: italic;
}

/* 单选 / 复选选项（分段 pill 按钮） */
.ep-radio-options,
.ep-checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ep-radio-label,
.ep-checkbox-label {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--ep-border-strong);
    border-radius: var(--ep-radius-sm);
    background-color: var(--ep-surface);
    cursor: pointer;
    transition: all var(--ep-transition);
    flex: 1 1 calc(33.333% - 8px);
    min-width: 150px;
}

.ep-radio-label:hover,
.ep-checkbox-label:hover {
    border-color: var(--ep-brand);
    background-color: var(--ep-brand-softer);
}

.ep-radio-label input[type="radio"],
.ep-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ep-radio-label:has(input[type="radio"]:checked),
.ep-checkbox-label:has(input[type="checkbox"]:checked) {
    border-color: var(--ep-brand);
    background-color: var(--ep-brand-soft);
    box-shadow: inset 3px 0 0 var(--ep-brand), var(--ep-ring);
}

.ep-option-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--ep-ink);
}

.ep-option-description {
    font-size: 12px;
    color: var(--ep-muted);
    line-height: 1.4;
}

/* 下拉选择框 */
.ep-select-container {
    width: 100%;
}

.ep-preference-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--ep-radius-sm);
    border: 1px solid var(--ep-border-strong);
    background-color: var(--ep-surface);
    font-size: 14px;
    font-family: inherit;
    color: var(--ep-ink);
}

.ep-preference-select:focus {
    border-color: var(--ep-brand);
    box-shadow: var(--ep-ring);
    outline: none;
}

/* 滑块 */
.ep-slider-container {
    margin-top: 8px;
}

.ep-slider-range {
    margin-bottom: 8px;
}

.ep-preference-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--ep-border);
    outline: none;
    border-radius: 3px;
    cursor: pointer;
}

.ep-preference-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ep-brand);
    cursor: pointer;
    border: 3px solid #ffffff;
    box-shadow: var(--ep-shadow-sm);
}

.ep-preference-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ep-brand);
    cursor: pointer;
    border: 3px solid #ffffff;
    box-shadow: var(--ep-shadow-sm);
}

.ep-slider-labels {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 5px;
}

.ep-slider-label {
    font-size: 12px;
    color: var(--ep-muted);
    padding: 3px 6px;
    border-radius: 4px;
    transition: all var(--ep-transition);
}

.ep-slider-label.active {
    background-color: var(--ep-brand-soft);
    color: var(--ep-brand-dark);
    font-weight: 600;
}

/* 响应式 */
@media (max-width: 768px) {
    .ep-radio-label,
    .ep-checkbox-label {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 480px) {
    .ep-radio-label,
    .ep-checkbox-label {
        flex: 1 1 100%;
    }

    .ep-selection-hint {
        margin-left: 0;
    }
}


/* ==========================================================
   方案 B：科技感智能推荐提示横幅 (Smart Match Banner)
   ========================================================== */
.ep-preferences-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto 22px auto;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
    border: 1px solid rgba(14, 116, 144, 0.18);
    border-radius: var(--ep-radius, 10px);
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.04);
}

/* 旋转/发光感小图标 */
.ep-banner-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ep-brand, #0e7490);
    box-shadow: 0 2px 6px rgba(14, 116, 144, 0.15);
}

/* 文案排版 */
.ep-banner-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.4;
}

/* 小胶囊标签 (SMART MATCH) */
.ep-banner-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--ep-brand, #0e7490);
    color: #ffffff;
    text-transform: uppercase;
}

/* 说明文字 */
.ep-banner-desc {
    font-size: 13px;
    color: var(--ep-ink, #0f172a);
    font-weight: 500;
}

/* 适配移动端小屏幕 */
@media screen and (max-width: 600px) {
    .ep-preferences-banner {
        align-items: flex-start;
        padding: 10px 14px;
        gap: 10px;
    }
    .ep-banner-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ==========================================================
   优化 SKIP SURVEY 与 CLEAR FORM 按钮质感
   ========================================================== */

/* 1. SKIP SURVEY: 现代白底描边风格，摆脱廉价死灰 */
#step2-5-skip-btn,
.ep-preferences-actions .ep-skip-btn {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 22px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#step2-5-skip-btn:hover,
.ep-preferences-actions .ep-skip-btn:hover {
    color: var(--ep-brand, #0e7490) !important;
    border-color: var(--ep-brand, #0e7490) !important;
    background: rgba(14, 116, 144, 0.05) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

/* 2. CLEAR FORM: 优雅轻量的幽灵文字风格，与主次按钮彻底区分 */
#step2-5-clear-btn,
.ep-preferences-actions .ep-clear-btn {
    background: transparent !important;
    color: #94a3b8 !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

#step2-5-clear-btn:hover,
.ep-preferences-actions .ep-clear-btn:hover {
    color: #ef4444 !important;
    border-color: #fca5a5 !important;
    border-style: solid !important;
    background: rgba(239, 68, 68, 0.06) !important;
}

/* 每张偏好卡片独立跳过按钮 */
.ep-category-skip-btn {
    margin-left: auto;
    padding: 5px 12px;
    border: 1px solid var(--ep-border-strong);
    border-radius: 6px;
    background: var(--ep-surface);
    color: var(--ep-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ep-category-skip-btn:hover {
    border-color: var(--ep-brand);
    color: var(--ep-brand);
    background: var(--ep-brand-soft);
}

.ep-category-skip-btn:focus-visible {
    outline: 2px solid var(--ep-brand);
    outline-offset: 2px;
}

/* 跳过后的卡片 */
.ep-preference-category.ep-category-skipped {
    background: var(--ep-surface);
    border-style: dashed;
}

.ep-category-skipped .ep-category-description,
.ep-category-skipped .ep-category-options {
    display: none;
}

.ep-category-skipped .ep-category-title-with-hints {
    margin-bottom: 0;
}

.ep-category-skipped .ep-category-skip-btn {
    color: var(--ep-brand);
    border-color: var(--ep-brand);
}

.ep-category-skipped .ep-selection-hint,
.ep-category-skipped .ep-not-required {
    display: none;
}

/* 跳过状态文字 */
.ep-category-skipped::after {
    content: "Skipped";
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--ep-muted);
}

/* 偏好卡片按钮：统一正常、悬停和焦点状态 */
#ep-lens-modal .ep-category-skip-btn,
#ep-lens-modal .ep-category-skip-btn:hover,
#ep-lens-modal .ep-category-skip-btn:focus,
#ep-lens-modal .ep-category-skip-btn:active {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #08799a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px;
    box-shadow: none !important;
    outline: none;
    cursor: pointer;
}

/* 鼠标悬停时的反馈 */
#ep-lens-modal .ep-category-skip-btn:hover {
    background: #eff7fa !important;
    background-color: #eff7fa !important;
    border-color: #08799a !important;
}

/* 键盘焦点提示 */
#ep-lens-modal .ep-category-skip-btn:focus-visible {
    outline: 2px solid #08799a !important;
    outline-offset: 2px;
}

/* ==============================================================
   ASEP Optical Boutique — Lens Preferences visual refresh v1
   CSS only: no form fields, values, event handlers or logic changed.
   ============================================================== */
#ep-lens-modal .ep-preferences-survey {
    --optical-ink: #172d3d;
    --optical-teal: #087e91;
    --optical-line: #dfe8e9;
    --optical-muted: #657784;
    max-width: 740px;
    color: var(--optical-ink);
    padding: 4px 0 10px;
}

/* Editorial-style introduction */
#ep-lens-modal .ep-preferences-banner {
    max-width: none;
    position: relative;
    align-items: center;
    gap: 18px;
    margin: 0 0 26px;
    padding: 25px 28px;
    border-radius: 18px;
    border: 1px solid #e1e9e6;
    background: linear-gradient(115deg, #f5f9f7 0%, #eef7f6 60%, #f9f7f0 100%);
    box-shadow: none;
    overflow: hidden;
}
#ep-lens-modal .ep-preferences-banner::after {
    content: "";
    position: absolute;
    width: 155px;
    height: 155px;
    right: -50px;
    top: -75px;
    border: 1px solid rgba(8,126,145,.16);
    border-radius: 50%;
    pointer-events: none;
}
#ep-lens-modal .ep-banner-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #fff;
    color: var(--optical-teal);
    box-shadow: 0 5px 18px rgba(25,65,72,.08);
}
#ep-lens-modal .ep-banner-icon svg { width: 25px; height: 25px; }
#ep-lens-modal .ep-banner-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}
#ep-lens-modal .ep-banner-badge {
    padding: 0;
    background: none;
    color: var(--optical-teal);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}
#ep-lens-modal .ep-banner-desc {
    max-width: 530px;
    color: #344d58;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
}

/* Quiet editorial sections instead of boxed form panels */
#ep-lens-modal .ep-preference-category {
    position: relative;
    margin: 0 0 16px;
    padding: 23px 24px 25px;
    border: 1px solid var(--optical-line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 24px rgba(20,48,59,.035);
}
#ep-lens-modal .ep-category-title-with-hints {
    gap: 8px;
    margin-bottom: 6px;
    align-items: baseline;
}
#ep-lens-modal .ep-category-title {
    color: var(--optical-ink);
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.25px;
    line-height: 1.45;
}
#ep-lens-modal .ep-selection-hint { display: none; }
#ep-lens-modal .ep-not-required {
    font-size: 11px;
    font-style: normal;
    color: #91a0a8;
}
#ep-lens-modal .ep-category-description {
    margin: 0 0 18px;
    color: var(--optical-muted);
    font-size: 12.5px;
    line-height: 1.65;
}
#ep-lens-modal .ep-radio-options,
#ep-lens-modal .ep-checkbox-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 11px;
}
#ep-lens-modal .ep-radio-label,
#ep-lens-modal .ep-checkbox-label {
    position: relative;
    min-width: 0;
    min-height: 116px;
    flex: none;
    gap: 9px;
    padding: 19px 15px 16px;
    border: 1.5px solid #e0e8e8;
    border-radius: 12px;
    background: #fcfdfc;
    box-shadow: none;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#ep-lens-modal .ep-radio-label::before,
#ep-lens-modal .ep-checkbox-label::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #eaf4f2;
    border: 1px solid #d5e7e4;
    margin-bottom: 2px;
}
#ep-lens-modal .ep-radio-label:hover,
#ep-lens-modal .ep-checkbox-label:hover {
    border-color: #78b7bd;
    background: #f7fbfa;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(8,89,105,.07);
}
#ep-lens-modal .ep-radio-label:has(input:checked),
#ep-lens-modal .ep-checkbox-label:has(input:checked) {
    border-color: var(--optical-teal);
    background: #edf8f7;
    box-shadow: 0 0 0 2px rgba(8,126,145,.12);
}
#ep-lens-modal .ep-radio-label:has(input:checked)::after,
#ep-lens-modal .ep-checkbox-label:has(input:checked)::after {
    content: "✓";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--optical-teal);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}
#ep-lens-modal .ep-radio-label:focus-within,
#ep-lens-modal .ep-checkbox-label:focus-within {
    outline: 2px solid var(--optical-teal);
    outline-offset: 3px;
}
#ep-lens-modal .ep-option-text {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 750;
    color: var(--optical-ink);
}
#ep-lens-modal .ep-option-description {
    font-size: 11.5px;
    line-height: 1.55;
    color: #758590;
}
#ep-lens-modal .ep-category-skip-btn,
#ep-lens-modal .ep-category-skip-btn:hover,
#ep-lens-modal .ep-category-skip-btn:focus,
#ep-lens-modal .ep-category-skip-btn:active {
    align-self: center;
    margin-left: auto;
    padding: 4px 7px;
    border: 0 !important;
    border-radius: 5px;
    background: transparent !important;
    color: #78909b !important;
    font-size: 11px;
    font-weight: 650;
    text-transform: none;
    box-shadow: none !important;
}
#ep-lens-modal .ep-category-skip-btn:hover {
    color: var(--optical-teal) !important;
    text-decoration: underline;
}
#ep-lens-modal .ep-preference-category.ep-category-skipped {
    background: #f9fbfa;
    border-style: dashed;
    box-shadow: none;
}
#ep-lens-modal .ep-category-skipped::after {
    color: var(--optical-muted);
}
#ep-lens-modal .ep-preferences-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-color: var(--optical-line);
    gap: 15px;
}
#ep-lens-modal .ep-preferences-actions .ep-skip-btn {
    border-radius: 999px !important;
    padding: 11px 24px !important;
    border-color: #cbd9dc !important;
    color: var(--optical-ink) !important;
}
#ep-lens-modal .ep-preferences-actions .ep-clear-btn {
    border: 0 !important;
    color: #84949b !important;
    padding: 11px 10px !important;
}
@media (max-width: 620px) {
    #ep-lens-modal .ep-preferences-banner {
        padding: 20px 18px;
        gap: 12px;
    }
    #ep-lens-modal .ep-banner-icon { width: 42px; height: 42px; }
    #ep-lens-modal .ep-preference-category { padding: 19px 16px 20px; }
    #ep-lens-modal .ep-radio-options,
    #ep-lens-modal .ep-checkbox-options { grid-template-columns: repeat(2, minmax(0,1fr)); }
    #ep-lens-modal .ep-radio-label,
    #ep-lens-modal .ep-checkbox-label { min-height: 108px; padding: 15px 12px; }
}
@media (max-width: 380px) {
    #ep-lens-modal .ep-radio-options,
    #ep-lens-modal .ep-checkbox-options { grid-template-columns: 1fr; }
    #ep-lens-modal .ep-radio-label,
    #ep-lens-modal .ep-checkbox-label { min-height: 82px; }
    #ep-lens-modal .ep-category-title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    #ep-lens-modal .ep-radio-label,
    #ep-lens-modal .ep-checkbox-label { transition: none; }
    #ep-lens-modal .ep-radio-label:hover,
    #ep-lens-modal .ep-checkbox-label:hover { transform: none; }
}

/* V2: purposeful optical-lifestyle pictograms in existing icon slots. */
#ep-lens-modal .ep-radio-label::before, #ep-lens-modal .ep-checkbox-label::before { background-color: #eaf4f2; background-repeat: no-repeat; background-position: center; background-size: 17px 17px; width: 35px; height: 35px; border-radius: 10px; }
#ep-lens-modal #ep-preferences-form > .ep-preference-category:nth-child(2) .ep-radio-label:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23087e91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2022h8M12%2018v4%22%2F%3E%3C%2Fsvg%3E"); }
#ep-lens-modal #ep-preferences-form > .ep-preference-category:nth-child(2) .ep-radio-label:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23087e91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2m0%2016v2M4.93%204.93l1.42%201.42m11.3%2011.3%201.42%201.42M2%2012h2m16%200h2M4.93%2019.07l1.42-1.42m11.3-11.3%201.42-1.42%22%2F%3E%3C%2Fsvg%3E"); }
#ep-lens-modal #ep-preferences-form > .ep-preference-category:nth-child(2) .ep-radio-label:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23087e91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2213.5%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2213.5%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M10.5%2013.5c1-1%202-1%203%200M2.5%2011l-1-2M21.5%2011l1-2%22%2F%3E%3C%2Fsvg%3E"); }
#ep-lens-modal #ep-preferences-form > .ep-preference-category:nth-child(3) .ep-radio-label:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23087e91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.9%2013a9%209%200%200%201-9.9-9.9A9%209%200%201%200%2020.9%2013Z%22%2F%3E%3Cpath%20d%3D%22m18%203%20.5%201.5L20%205l-1.5.5L18%207l-.5-1.5L16%205l1.5-.5Z%22%2F%3E%3C%2Fsvg%3E"); }
#ep-lens-modal #ep-preferences-form > .ep-preference-category:nth-child(3) .ep-radio-label:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23087e91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2017-1%202m15-2%201%202M5%2017H3V9l3-5h12l3%205v8h-2M5%2017h14M3%2010h18M7%2014h1m8%200h1%22%2F%3E%3C%2Fsvg%3E"); }
#ep-lens-modal #ep-preferences-form > .ep-preference-category:nth-child(4) .ep-radio-label:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23087e91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%204C10%204%205%209%205%2017l-2%203M5%2017c8%200%2015-5%2015-13M5%2017l10-10%22%2F%3E%3C%2Fsvg%3E"); }
#ep-lens-modal #ep-preferences-form > .ep-preference-category:nth-child(4) .ep-radio-label:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23087e91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2215%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M16%2014h2%22%2F%3E%3C%2Fsvg%3E"); }
#ep-lens-modal #ep-preferences-form > .ep-preference-category:nth-child(4) .ep-radio-label:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23087e91%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010Z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
#ep-lens-modal .ep-radio-label:has(input:checked)::before, #ep-lens-modal .ep-checkbox-label:has(input:checked)::before { background-color: #d6eeea; border-color: #a7d6d0; }


/* Optical V2 — discoverable Skip Survey entry before the questions */
#ep-lens-modal .ep-survey-quick-skip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 19px;
    margin: -7px 0 19px;
    border: 1px solid #dceae8;
    border-radius: 13px;
    background: #f7fbfa;
}
#ep-lens-modal .ep-survey-quick-skip-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
#ep-lens-modal .ep-survey-quick-skip-copy strong {
    font-size: 13px;
    font-weight: 650;
    color: #335d66;
}
#ep-lens-modal .ep-survey-quick-skip-copy span {
    color: #6c8389;
    font-size: 12px;
    line-height: 1.5;
}
#ep-lens-modal .ep-survey-quick-skip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #a5c9cb;
    border-radius: 999px;
    background: #fff;
    color: #397b85;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
#ep-lens-modal .ep-survey-quick-skip-btn:hover {
    background: #e8f6f3;
    border-color: #6da9b0;
}
#ep-lens-modal .ep-survey-quick-skip-btn:focus-visible {
    outline: 2px solid #397b85;
    outline-offset: 3px;
}
@media (max-width: 480px) {
    #ep-lens-modal .ep-survey-quick-skip {
        flex-direction: column;
        align-items: stretch;
        padding: 15px;
    }
    #ep-lens-modal .ep-survey-quick-skip-btn { align-self: flex-start; }
}

/* Two-screen preference flow: selection and dedicated questionnaire */
.ep-preferences-survey .ep-survey-choice-screen[hidden],
.ep-preferences-survey .ep-survey-question-screen[hidden] { display: none !important; }
#ep-lens-modal .ep-survey-start-card, .ep-preferences-survey .ep-survey-start-card {
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:16px 19px;margin:0 0 19px;border:1px solid #dceae8;
    border-radius:13px;background:#f7fbfa;
}
#ep-lens-modal .ep-survey-start-btn, .ep-preferences-survey .ep-survey-start-btn {
    display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;
    padding:10px 16px;border:1px solid #a5c9cb;border-radius:999px;
    background:#fff;color:#397b85;font-size:12px;font-weight:650;cursor:pointer;
}
.ep-preferences-survey .ep-survey-start-btn:hover { background:#e8f6f3;border-color:#6da9b0; }
.ep-preferences-survey .ep-survey-back-btn {
    border:0;background:transparent;color:#397b85;font-size:13px;
    cursor:pointer;padding:8px 0;margin-bottom:12px;
}
.ep-preferences-survey .ep-survey-screen-heading {
    margin:0 0 22px;color:#335d66;font-size:20px;font-weight:600;
}
@media(max-width:480px) {
    #ep-lens-modal .ep-survey-start-card,.ep-preferences-survey .ep-survey-start-card {
        flex-direction:column;align-items:stretch;padding:15px;
    }
    .ep-preferences-survey .ep-survey-start-btn {align-self:flex-start;}
}

/* SMART MATCH is the parent panel for both entry choices. */
#ep-lens-modal .ep-smart-match-panel,
.ep-preferences-survey .ep-smart-match-panel {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid #dceae8;
    border-radius: 18px;
    background: linear-gradient(120deg, #f2f9f8 0%, #f8f7f1 100%);
}
#ep-lens-modal .ep-smart-match-panel .ep-preferences-banner,
.ep-preferences-survey .ep-smart-match-panel .ep-preferences-banner {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0 0 23px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
#ep-lens-modal .ep-smart-match-panel .ep-survey-quick-skip,
.ep-preferences-survey .ep-smart-match-panel .ep-survey-quick-skip {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    background: #fff;
    border-color: #d8e9e7;
}
#ep-lens-modal .ep-smart-match-panel .ep-survey-start-card,
.ep-preferences-survey .ep-smart-match-panel .ep-survey-start-card {
    position: relative;
    z-index: 1;
    margin: 0;
    background: #fff;
    border-color: #d8e9e7;
}
@media (max-width: 480px) {
    #ep-lens-modal .ep-smart-match-panel,
    .ep-preferences-survey .ep-smart-match-panel { padding: 16px; }
}

/* Keep START SURVEY visually identical to SKIP SURVEY. */
#ep-lens-modal .ep-survey-start-btn,
.ep-preferences-survey .ep-survey-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #a5c9cb;
    border-radius: 999px;
    background: #fff;
    color: #397b85;
    font-size: 12px;
    font-weight: 650;
    line-height: normal;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
#ep-lens-modal .ep-survey-start-btn:hover,
.ep-preferences-survey .ep-survey-start-btn:hover {
    background: #e8f6f3;
    border-color: #6da9b0;
}
#ep-lens-modal .ep-survey-start-btn:focus-visible,
.ep-preferences-survey .ep-survey-start-btn:focus-visible {
    outline: 2px solid #397b85;
    outline-offset: 3px;
}

/* Choice order: START SURVEY first, SKIP SURVEY second. */
#ep-lens-modal .ep-survey-choice-screen,
.ep-preferences-survey .ep-survey-choice-screen {
    display: flex;
    flex-direction: column;
}
#ep-lens-modal .ep-survey-choice-screen .ep-preferences-banner,
.ep-preferences-survey .ep-survey-choice-screen .ep-preferences-banner { order: 0; }
#ep-lens-modal .ep-survey-choice-screen .ep-survey-start-card,
.ep-preferences-survey .ep-survey-choice-screen .ep-survey-start-card { order: 1; }
#ep-lens-modal .ep-survey-choice-screen .ep-survey-quick-skip,
.ep-preferences-survey .ep-survey-choice-screen .ep-survey-quick-skip { order: 2; }

/* Exact same dimensions and typography for both actions. */
#ep-lens-modal .ep-survey-quick-skip-btn,
#ep-lens-modal .ep-survey-start-btn,
.ep-preferences-survey .ep-survey-quick-skip-btn,
.ep-preferences-survey .ep-survey-start-btn {
    box-sizing: border-box;
    width: 175px;
    min-width: 175px;
    min-height: 46px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 20px;
    letter-spacing: 0;
    white-space: nowrap;
}
@media (max-width: 480px) {
    #ep-lens-modal .ep-survey-quick-skip-btn,
    #ep-lens-modal .ep-survey-start-btn,
    .ep-preferences-survey .ep-survey-quick-skip-btn,
    .ep-preferences-survey .ep-survey-start-btn {
        width: 175px;
        min-width: 175px;
    }
}

#ep-lens-modal .ep-smart-match-panel,
.ep-preferences-survey .ep-smart-match-panel {
    display: flex;
    flex-direction: column;
}
#ep-lens-modal .ep-smart-match-panel > .ep-preferences-banner,
.ep-preferences-survey .ep-smart-match-panel > .ep-preferences-banner { order: 0; }
#ep-lens-modal .ep-smart-match-panel > .ep-survey-start-card,
.ep-preferences-survey .ep-smart-match-panel > .ep-survey-start-card { order: 1; margin-bottom: 14px; }
#ep-lens-modal .ep-smart-match-panel > .ep-survey-quick-skip,
.ep-preferences-survey .ep-smart-match-panel > .ep-survey-quick-skip { order: 2; margin-bottom: 0; }

/* Compact, matching action buttons. */
#ep-lens-modal .ep-survey-start-btn,
#ep-lens-modal .ep-survey-quick-skip-btn,
.ep-preferences-survey .ep-survey-start-btn,
.ep-preferences-survey .ep-survey-quick-skip-btn {
    width: 150px;
    min-width: 150px;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 18px;
}

/* Decorative eyeglasses in the top-right of the SMART MATCH container. */
#ep-lens-modal .ep-smart-match-panel,
.ep-preferences-survey .ep-smart-match-panel { position: relative; }
#ep-lens-modal .ep-smart-match-glasses,
.ep-preferences-survey .ep-smart-match-glasses {
    position: absolute;
    top: 13px;
    right: 19px;
    z-index: 0;
    display: flex;
    color: #6fa8b3;
    opacity: .38;
    pointer-events: none;
}
#ep-lens-modal .ep-smart-match-panel .ep-preferences-banner,
.ep-preferences-survey .ep-smart-match-panel .ep-preferences-banner { padding-right: 78px; }

/* Small contextual icon at the upper-left of each choice card. */
#ep-lens-modal .ep-smart-match-panel .ep-survey-start-card,
#ep-lens-modal .ep-smart-match-panel .ep-survey-quick-skip,
.ep-preferences-survey .ep-smart-match-panel .ep-survey-start-card,
.ep-preferences-survey .ep-smart-match-panel .ep-survey-quick-skip {
    position: relative;
    padding-left: 57px;
}
#ep-lens-modal .ep-choice-card-icon,
.ep-preferences-survey .ep-choice-card-icon {
    position: absolute;
    top: 16px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: #edf7f7;
    color: #26859b;
    pointer-events: none;
}
@media(max-width:480px) {
    #ep-lens-modal .ep-smart-match-panel .ep-preferences-banner,
    .ep-preferences-survey .ep-smart-match-panel .ep-preferences-banner { padding-right: 52px; }
    #ep-lens-modal .ep-smart-match-glasses,
    .ep-preferences-survey .ep-smart-match-glasses { right: 8px; top: 10px; transform: scale(.72); transform-origin: top right; }
    #ep-lens-modal .ep-smart-match-panel .ep-survey-start-card,
    #ep-lens-modal .ep-smart-match-panel .ep-survey-quick-skip,
    .ep-preferences-survey .ep-smart-match-panel .ep-survey-start-card,
    .ep-preferences-survey .ep-smart-match-panel .ep-survey-quick-skip { padding-left: 54px; }
}

/* Hide the redundant step heading only on the questionnaire screen. */
#step2-5-preferences-survey:has(.ep-survey-question-screen:not([hidden])) > h3 {
    display: none !important;
}