/* Member onboarding shares the login palette; all overrides stay within these pages. */
.jl-registration-page {
    --member-green: #07574e;
    --member-ink: #163e38;
    --member-muted: #62736b;
    --member-border: #d9e1d5;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.jl-registration-page .rw {
    --rw-primary: #07574e;
    --rw-primary-light: #e8f0e5;
    --rw-primary-dark: #163e38;
    --rw-accent: #397259;
    --rw-accent-light: #e8f0e5;
    --rw-text: #163e38;
    --rw-text-secondary: #62736b;
    --rw-text-muted: #657568;
    --rw-border: #d9e1d5;
    --rw-shadow-sm: 0 4px 18px #1b423808;
    --rw-radius: 8px;
    --rw-radius-sm: 4px;
    max-width: 860px;
    padding: 0 24px 32px;
}
.jl-registration-page .rw-header,
.jl-registration-intro {
    position: relative;
    padding: 32px 0 24px;
    text-align: left;
}
.jl-registration-page .rw-header::after,
.jl-registration-intro::after {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin-top: 20px;
    border-radius: 4px;
    background: #b9c643;
}
.jl-registration-page .rw-header .jl-registration-eyebrow,
.jl-registration-page .jl-registration-eyebrow {
    margin: 0 0 12px;
    color: #07574e;
    font-size: 11px;
    letter-spacing: .18em;
    font-weight: 600;
    line-height: 1.6;
}
.jl-registration-page .rw-header h1,
.jl-registration-intro h1 {
    font-size: 30px;
    line-height: 1.5;
    color: #163e38;
    letter-spacing: .04em;
    font-weight: 600;
    margin: 0 0 8px;
}
.jl-registration-intro > p:last-of-type,
.jl-registration-page .rw-header .jl-registration-subtitle {
    color: #62736b;
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
}
.jl-registration-page .rw-card { padding: 24px; }
.jl-registration-page .rw-card > h3 { font-size: 16px; letter-spacing: .03em; }
.jl-registration-page .rw .form-control {
    background: #fcfdfb;
    min-height: 48px;
    font-size: 16px;
}
.jl-registration-page .rw .form-control:focus {
    border-color: #07574e;
    box-shadow: 0 0 0 3px #07574e18;
}
.jl-registration-page .rw .form-control[readonly] { background: #edf0e9; }
.jl-registration-page .rw input:is([type="radio"],[type="checkbox"]) { accent-color: #07574e; }
.jl-registration-page .rw .rw-btn-submit { background: #07574e; }
.jl-registration-page .rw .rw-btn-submit:hover:not(:disabled) { background: #03463e; }
.jl-registration-page .rw .rw-progress-circle { background: #edf0e8; }
.jl-registration-page .rw .is-current .rw-progress-circle { background: #07574e; }
.jl-registration-page .rw .is-done .rw-progress-circle { background: #397259; }
.jl-registration-page .rw .is-error .rw-progress-circle { background: var(--rw-danger-light); }
.jl-registration-page .rw .rw-nav { box-shadow: 0 4px 18px #1b423808; }
.jl-registration-page :is(a,button,input,select,summary):focus-visible {
    outline: 3px solid #7d8b17;
    outline-offset: 4px;
}
.jl-join { max-width: 860px; margin: auto; padding: 0 24px 36px; }
.jl-join fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.jl-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jl-memberships { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.jl-membership { background: #fff; border: 1px solid #d9e1d5; border-radius: 8px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.jl-membership:has(input:checked) { border-color: #07574e; box-shadow: 0 0 0 2px #07574e; background: #f7faf3; }
.jl-membership:has(input:focus-visible) { outline: 3px solid #7d8b17; outline-offset: 4px; }
.jl-membership__choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: auto; padding: 28px; margin: 0; cursor: pointer; }
.jl-membership__choice input { position: absolute; right: 24px; top: 24px; width: 20px; height: 20px; accent-color: #07574e; }
.jl-membership__art { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50% 50% 12px 50%; background: #e7eee0; color: #07574e; margin-bottom: 24px; }
.jl-membership__art--wellness { background: #f0f1d1; border-radius: 50% 50% 50% 12px; }
.jl-membership__art svg { width: 54px; height: 54px; }
.jl-membership__eyebrow { font-size: 10px; letter-spacing: .16em; color: #62736b; margin-bottom: 8px; }
.jl-membership__title { font-size: 23px; font-weight: 600; color: #163e38; margin-bottom: 12px; }
.jl-membership__description { font-size: 14px; color: #62736b; line-height: 1.9; }
.jl-membership__details { margin: 0 28px 24px; border-top: 1px solid #d9e1d5; padding-top: 12px; color: #07574e; font-size: 13px; line-height: 1.8; }
.jl-membership__details summary { display: list-item; list-style: revert; cursor: pointer; padding: 4px 0; }
.jl-membership__details ul { list-style: disc; padding-left: 20px; margin: 12px 0 0; color: #62736b; }
.jl-join__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 28px; }
.jl-join__actions > a { color: #07574e; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; padding: 6px; }
.jl-member-primary { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 50px; padding: 12px 22px; border: 1px solid #07574e; border-radius: 4px; color: white; background: #07574e; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; }
.jl-join__actions .jl-member-primary { width: min(100%, 380px); }
.jl-member-primary > span { color: #d4d83d; font-size: 24px; line-height: 1; }
.jl-member-primary:hover { color: white; background: #03463e; }
.jl-member-secondary { display: inline-flex; justify-content: center; align-items: center; min-height: 50px; padding: 12px 22px; border: 1px solid #c6d4c5; border-radius: 4px; color: #07574e; background: white; }
.jl-member-result { max-width: 680px; margin: 32px auto; padding: 32px; border: 1px solid #d9e1d5; border-radius: 8px; background: #fff; color: #163e38; }
.jl-member-result .jl-registration-intro { padding: 0 0 20px; }
.jl-member-result__mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; background: #edf2dc; color: #07574e; border-radius: 50%; font-size: 28px; }
.jl-member-result__codes { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 20px 0; }
.jl-member-result__codes li { padding: 10px 16px; background: #edf2e9; border-radius: 4px; color: #07574e; font-weight: 600; letter-spacing: .04em; overflow-wrap: anywhere; }
.jl-member-result__login { padding: 20px; border: 1px solid #d9e1d5; border-radius: 4px; line-height: 1.9; margin: 20px 0; background: #fbfcf7; }
.jl-member-result__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 20px; margin-top: 24px; border-top: 1px solid #d9e1d5; }
.jl-registration-legacy { width: 100%; }
.jl-registration-legacy form > .rw-card { margin-top: 0; }
@media (max-width: 767px) {
    .jl-registration-page .rw { padding: 0 16px calc(96px + var(--rw-bottom-offset, 0px)); }
    .jl-registration-page .rw-header, .jl-registration-intro { padding: 24px 0 20px; }
    .jl-registration-page .rw-header h1, .jl-registration-intro h1 { font-size: 25px; }
    .jl-registration-page .rw-card { padding: 20px; }
    .jl-registration-page .rw-progress-label { font-size: 12px; }
    .jl-registration-page .rw:has(.jl-registration-legacy) { padding-bottom: 32px; }
    .jl-join { padding: 0 16px 28px; }
    .jl-memberships { grid-template-columns: 1fr; gap: 16px; }
    .jl-membership__choice { display: grid; grid-template-columns: 52px 1fr; gap: 8px 16px; padding: 24px; }
    .jl-membership__art { grid-row: 1 / 3; width: 52px; height: 52px; margin: 0; }
    .jl-membership__art svg { width: 44px; height: 44px; }
    .jl-membership__eyebrow { grid-column: 2; padding-right: 20px; margin: 0; font-size: 9px; }
    .jl-membership__title { grid-column: 2; margin: 0; font-size: 21px; }
    .jl-membership__description { grid-column: 1 / -1; margin-top: 6px; }
    .jl-membership__details { margin: 0 24px 20px; }
    .jl-member-result { margin: 24px 16px; padding: 24px; }
    .jl-member-result__actions > a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .jl-membership { transition: none; } }
/* 列印入會申請書（User/Home/PrintApplication） */
.jl-print__legend { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #163e38; }
/* 版型 JS 可能把 select 換成 nice-select，這頁一律維持原生下拉 */
.jl-print .nice-select { display: none !important; }
.jl-print__select { display: block !important; width: 100%; height: 52px; margin: 0; padding: 0 44px 0 14px; border: 1px solid #d9e1d5; border-radius: 4px; background: #fcfdfb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2307574e' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; color: #163e38; font-family: inherit; font-size: 16px; font-variant-numeric: tabular-nums; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.jl-print__select:hover { border-color: #9fb8a8; }
.jl-print__select:focus { border-color: #07574e; box-shadow: 0 0 0 3px #07574e18; background-color: #fff; outline: none; }
.jl-print__select:focus-visible { outline: 3px solid #7d8b17; outline-offset: 2px; }
.jl-print__submit { margin-top: 24px; }
.jl-print .jl-member-primary { width: 100%; font-family: inherit; letter-spacing: .1em; }
.jl-print__note { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: #62736b; }
.jl-print__empty { padding: 20px; border: 1px dashed #d9e1d5; border-radius: 4px; color: #62736b; text-align: center; }
@media (prefers-reduced-motion: reduce) { .jl-print__select { transition: none; } }

/* 入會檢附資料上傳（User/Home/UploadEnrollFile）
   這頁只用精靈的上傳卡、沒有呼叫 RegisterWizard.init，header 位移不會被量測；
   品牌頁的 header 是 sticky（member-login.css），不需要讓位，直接歸零。 */
.jl-docs { --rw-header-offset: 0px; }
.jl-docs__progress { margin: 0 0 16px; padding: 16px 20px; border: 1px solid #d9e1d5; border-radius: 8px; background: #fff; }
.jl-docs__progress-text { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; color: #62736b; }
.jl-docs__progress-text strong { color: #07574e; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jl-docs__bar { height: 8px; overflow: hidden; border-radius: 999px; background: #edf0e8; }
.jl-docs__bar span { display: block; height: 100%; border-radius: 999px; background: #07574e; }
.jl-docs__uploaded { background: #f7faf3; }
.jl-docs__uploaded .rw-upload-state { color: #07574e; font-weight: 600; }
.jl-docs__form-error:empty { display: none; }
.jl-docs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.jl-docs__actions .rw-btn { min-height: 48px; padding: 0 24px; }
.jl-docs__done { text-align: center; }
.jl-docs__done-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 16px; border-radius: 50%; background: #edf2dc; color: #07574e; font-size: 30px; }
.jl-docs__done h3 { margin-bottom: 8px; }
.jl-docs__done p { margin: 0 0 20px; color: #62736b; font-size: 14px; line-height: 1.8; }
@media (max-width: 767px) {
    .jl-docs__actions .rw-btn { flex: 1 1 100%; justify-content: center; }
}

.jl-registration-page #policyModal .modal-header {
    background: #07574e !important;
}
.jl-registration-page #policyModal .text-primary {
    color: #07574e !important;
}
