/* ============================================================
   Register — page shell
   ============================================================ */
.reg-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.reg-page .ksam-body {
    flex: 1;
    position: relative;
    background: var(--c-bg-section);
    padding: 32px 40px 60px;
}

.reg-page .ksam-body__inner {
    position: relative;
    z-index: 1;
}

/* ============================================================
   Register — header
   ============================================================ */
.reg-header {
    background: var(--c-white);
    box-shadow: 0px 2px 5px 0px #0000001A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 52px;
    padding: 0 32px;
    height: 84px;
    width: 100%;
}

.reg-header__logo {
    height: 84px;
    width: auto;
    flex-shrink: 0;
}

/* ============================================================
   Register — two-column layout
   ============================================================ */
.reg-layout {
    display: flex;
    gap: var(--gap-xl);
    align-items: flex-start;
    max-width: 1540px;
    margin: 0 auto;
}

.reg-main {
    flex: 1 1 0;
    min-width: 0;
}

.reg-aside {
    flex: 0 0 340px;
    width: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 24px;
}

.reg-aside__img {
    width: 100%;
    height: auto;
}


/* ============================================================
   Progress
   ============================================================ */
.reg-content {
    padding: 0 40px 8px;
}

.reg-step-label {
    text-align: center;
    font-size: var(--fs-18);
    color: var(--c-primary);
    margin-bottom: 24px;
}

.reg-progress {
    display: flex;
    gap: 18px;
    max-width: 1480px;
    margin: 0 auto 40px;
}

.reg-progress__bar {
    flex: 1;
    height: 6px;
    border-radius: 2px;
    background: #d9d9d9;
}

.reg-progress__bar--done {
    background: var(--c-accent);
}

/* ============================================================
   Title row
   ============================================================ */
.reg-title-row {
    position: relative;
    width: 772px;
    max-width: 100%;
    margin: 0 auto 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
}

.reg-title-row--wide {
    width: 1079px;
}

.reg-back {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-primary);
    font-weight: 400;
    font-size: var(--fs-18);
    line-height: 1;
    letter-spacing: 0px;
    text-decoration: none;
}

.reg-title {
    font-size: var(--fs-30);
    font-weight: 500;
    color: var(--c-primary);
    text-align: center;
    margin: 0;
}

/* ============================================================
   Form card
   ============================================================ */
.reg-form-card {
    width: 772px;
    max-width: 100%;
    min-height: 363px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 10px;
    padding: 33px 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.reg-field-label {
    font-size: var(--fs-14);
    font-weight: 500;
    color: #705F5F;
    margin-bottom: 11px;
}

.reg-input {
    width: 100%;
    height: 46px;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    padding: 10px 16px;
    font-size: var(--fs-16);
    font-family: inherit;
    color: #4c4c4c;
    outline: none;
    gap: 8px;
}

.reg-input:focus { border-color: var(--c-accent); }

.reg-input::placeholder {
    color: #b3b3b3;
    font-size: var(--fs-15);
    font-weight: 400;
}

.reg-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: var(--fs-12);
    color: #949494;
}

/* ============================================================
   Terms content
   ============================================================ */
.reg-terms-card {
    width: 1079px;
    max-width: 100%;
    height: 570px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    padding: 28px 32px;
    overflow: hidden;
}

.reg-terms {
    max-height: 100%;
    height: calc(570px - 56px);
    overflow-y: scroll;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: var(--fs-16);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0px;
    color: var(--c-primary);
}

.reg-terms p { margin: 0; }

.reg-terms__heading {

    font-size: var(--fs-15);
    color: #4c4c4c;
    padding-bottom: 10px;
}

.reg-terms__section {

    color: #4c4c4c;
    margin-top: 4px !important;
}

.reg-terms__num {

    color: #4c4c4c;
    margin-right: 4px;
}

.reg-terms::-webkit-scrollbar { width: 8px; }
.reg-terms::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 8px; }

.reg-checkbox-row {
    max-width: 1060px;
    margin: 24px auto 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-16);
    color: var(--c-primary);
}

.reg-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.reg-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
}

.reg-btn {
    display: block;
    background: var(--c-accent);
    color: var(--c-primary);
    border: none;
    border-radius: 3px;
    padding: 13px 0;
    width: 380px;
    max-width: 90%;
    font-family: inherit;
    font-size: var(--fs-16);
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease;
}

.reg-btn:hover { background: #e6be00; color: var(--c-primary); }

.reg-btn-link {
    font-size: var(--fs-16);
    color: var(--c-primary);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

/* ============================================================
   Investment warning extra section (Account/Warning)
   ============================================================ */
.reg-warning-extra {
    width: 1079px;
    max-width: 100%;
    margin: 28px auto 0;
    font-size: var(--fs-16);
    color: var(--c-primary);
    line-height: 1.7;
}

.reg-warning-extra__title {
    margin: 0 0 16px;
}

.reg-warning-table {
    display: flex;
    flex-direction: column;
}

.reg-warning-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 14px 4px;
    border-bottom: 1px solid #e2e2e2;
}

.reg-warning-row > span:last-child {
    color: #6f6157;
    text-align: right;
}

.reg-warning-row b { font-weight: 500; }

.reg-warning-extra__note {
    margin: 8px 0 0;
    font-size: var(--fs-15);
    color: #8e8676;
}

.reg-warning-extra__para {
    margin: 20px 0 0;
}

.reg-warning-extra__ack {
    margin: 28px 0 0;
}

/* ============================================================
   Subtitle (Account onboarding pages)
   ============================================================ */
.reg-subtitle {
    text-align: center;
    color: #6f6157;
    font-size: var(--fs-16);
    margin: 6px 0 28px;
}

/* ============================================================
   Two-factor setup card (Account/Setup2FA)
   ============================================================ */
.reg-2fa-card {
    width: 772px;
    max-width: 100%;
    align-items: stretch;
    gap: 0;
    padding: 47px 44px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    min-height: auto;
}

.reg-2fa-top {
    display: flex;
    gap: 43px;
    align-items: center;
}

.reg-2fa-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    width: 197px;
}

.reg-2fa-qr img {
    box-sizing: border-box;
    width: 197px;
    height: 197px;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    padding: 0;
    background: #fff;
}

.reg-2fa-qr__caption {
    font-size: var(--fs-14);
    line-height: 24px;
    color: #4C4C4C;
}

.reg-2fa-steps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1;
}

.reg-2fa-step {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    font-size: var(--fs-18);
    line-height: 31px;
    color: #4C4C4C;
}

.reg-2fa-step__num {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 60px;
    background: #FFD400;
    color: #6F5F5E;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-20);
    line-height: 1;
}

.reg-2fa-key {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    align-self: stretch;
    background: #FBF8F1;
    border: 1px solid #FFD400;
    border-radius: 3px;
    padding: 8px 16px;
    margin-top: 0;
}

.reg-2fa-key__label {
    font-size: var(--fs-13);
    line-height: 24px;
    color: #949494;
}

.reg-2fa-key__value {
    font-size: var(--fs-15);
    font-weight: 500;
    line-height: 24px;
    color: #8E8676;
}

.reg-2fa-key__copy {
    background: none;
    border: none;
    padding: 0;
    color: #8E8676;
    font-family: inherit;
    font-size: var(--fs-15);
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
}

.reg-2fa-divider {
    width: 100%;
    height: 0;
    border-top: 1px solid #D9D9D9;
    margin: 20px 0;
}

.reg-2fa-verify {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.reg-2fa-verify .reg-field-label {
    font-size: var(--fs-14);
    font-weight: 500;
    color: #705F5F;
    margin-bottom: 9px;
}

.reg-2fa-verify .reg-input-wrap {
    width: 100%;
    height: 46px;
}

.reg-2fa-verify .reg-input { height: 46px; }

@media (max-width: 720px) {
    .reg-2fa-top { flex-direction: column; align-items: center; }
    .reg-2fa-steps { width: 100%; }
}

/* ============================================================
   Bind phone (Account/BindPhonePrompt, BindPhone)
   ============================================================ */
.reg-bind-heading {
    font-size: var(--fs-18);
    color: var(--c-primary);
    font-weight: 500;
}

.reg-bind-sub {
    font-size: var(--fs-16);
    color: #949494;
    line-height: 1.6;
    margin-top: 8px;
}

.reg-infobox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fffaf0;
    border: 1px solid var(--c-accent);
    border-radius: 6px;
    padding: 14px 18px;
    margin-top: 20px;
    font-size: var(--fs-15);
    color: #8e7a52;
    line-height: 1.6;
}

.reg-infobox svg { flex-shrink: 0; margin-top: 2px; }

.reg-bind-note {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--fs-15);
    color: #EF4949;
    line-height: 1.6;
}

/* ============================================================
   Radio card (Step 4)
   ============================================================ */
.reg-input--readonly {
    background: #f5f5f5;
    color: var(--c-primary);
    cursor: default;
}

.reg-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reg-radio-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #ededed;
    border-radius: 6px;
    padding: 14px 18px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.reg-radio-card--selected {
    border-color: var(--c-accent);
    background: #fffdf0;
}

.reg-radio-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d4d4d4;
    background: #fff;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.reg-radio-dot--active {
    border: 6px solid var(--c-accent);
    background: #fff;
}

.reg-radio-content {
    display: flex;
    flex-direction: column;
 
}

.reg-radio-title {
    font-size: var(--fs-13);
    font-weight: 400;
    color: #8E8676;
}

.reg-radio-sub {
    font-size: var(--fs-12);
    color: #8E8676;
    margin-top:5px;
}

.reg-note {
    font-size: var(--fs-15);
    color: #EF4949;
    line-height: 1.8;
}


.reg-note__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 4px;
}

/* ============================================================
   Input with icon (Step 5)
   ============================================================ */
.reg-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    background: #fff;
    transition: border-color 0.15s;
}

.reg-input-wrap:focus-within {
    border-color: var(--c-accent);
}

.reg-input-wrap .reg-input {
    flex: 1;
    border: none;
    border-radius: 0;
    outline: none;
    background: transparent;
    min-width: 0;
}

.reg-input-wrap .reg-input:focus {
    border-color: transparent;
}

.reg-input--icon { padding-right: 0; }

.reg-input-icon {
    padding: 0 14px;
    color: #b3b3b3;
    cursor: pointer;
    flex-shrink: 0;
    font-size: var(--fs-18);
}

/* Validation rules */
.reg-rules {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.reg-rule {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--fs-12);
    color: #9a9088;
    line-height: 1.5;
}

.reg-rule__dot {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23d4cfc9'/%3E%3Cpath d='M7 12l3.5 3.5L17 8.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-image 0.15s;
}

.reg-rule__dot--pass {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2348bb78'/%3E%3Cpath d='M7 12l3.5 3.5L17 8.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.reg-rule--pass {
    color: #48bb78;
}

/* Password strength */
.reg-strength {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.reg-strength__bar {
    flex: 1;
    height: 4px;
    background: #e8e8e8;
    border-radius: 2px;
    overflow: hidden;
}

.reg-strength__fill {
    height: 100%;
    border-radius: 2px;
}

.reg-strength__fill--low { width: 33%; background: #e53e3e; }
.reg-strength__fill--mid { width: 66%; background: #f6ad55; }
.reg-strength__fill--high { width: 100%; background: #48bb78; }

.reg-strength__label { font-size: var(--fs-12); white-space: nowrap; }
.reg-strength__label--low  { color: #EF4949; }
.reg-strength__label--mid  { color: #f6ad55; }
.reg-strength__label--high { color: #48bb78; }

/* ============================================================
   OTP
   ============================================================ */
.reg-otp-card {
    width: 772px;
    max-width: 100%;
    min-height: 360px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 10px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

.reg-otp-inputs {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.reg-otp-input {
    box-sizing: border-box;
    width: 71px;
    height: 89px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    padding: 10px;
    font-size: var(--fs-32);
    font-weight: 600;
    text-align: center;
    font-family: inherit;
    color: #4c4c4c;
    outline: none;
    flex-shrink: 0;
}

.reg-otp-input:focus { border-color: var(--c-accent); }

.reg-otp-ref { font-size: var(--fs-16); color: #949494; text-align: center; margin-top: 8px; margin-bottom: 31px; }
.reg-otp-msg { font-size: var(--fs-16); color: var(--c-primary); margin-top: 22px; }
.reg-otp-note { display: flex; align-items: center; gap: 7px; font-size: var(--fs-16); color: #949494; margin-top: 4px; }

/* ============================================================
   Footer
   ============================================================ */
.reg-footer {
    background: var(--c-bg-section);
    padding: 24px 0;
    text-align: center;
    font-size: var(--fs-16);
    color: var(--c-primary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============================================================
   Fund holder list (Step 6)
   ============================================================ */
.reg-fund-card {
    width: 772px;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 10px;
    overflow: hidden;
}

.reg-fund-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 16px;
    font-size: var(--fs-16);
    color: var(--c-primary);
}

.reg-fund-select-all {
    font-size: var(--fs-15);

    color: var(--c-primary);
    cursor: pointer;
    text-decoration: none;
}

.reg-fund-list {
    display: flex;
    flex-direction: column;
    padding: 0 32px 24px;
    gap: 35px;
}

.reg-fund-item {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.reg-fund-check {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--c-accent);
    border: 1.5px solid var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.reg-fund-check--empty {
    background: #fff;
    border-color: #d4d4d4;
}

.reg-fund-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.reg-fund-label {
    font-size: var(--fs-13);
    color: #705F5F;
}

.reg-fund-number {
    font-size: var(--fs-20);
    font-weight: 500;
    color: var(--c-primary);
    margin-top: 7px;
}

/* ============================================================
   Success page (Complete)
   ============================================================ */
.reg-success-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24px;
}

.reg-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.reg-success-title {
    font-size: var(--fs-30);
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: 32px;
}

.reg-success-card {
    width: 772px;
    max-width: 100%;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 25px 62px;
    display: flex;
    flex-direction: column;
  
    font-size: var(--fs-16);
    color: var(--c-primary);
    line-height: 1.9;
    margin-bottom: 40px;
}

.reg-success-card__intro {
    text-align: center;
    margin: 0 0 16px;
    font-size: var(--fs-16);
}

.reg-success-card__sub {
    text-align: center;

    font-size: var(--fs-16);
    line-height: 1.9;
}

.reg-success-card__desc {
    margin: 6px 0 8px;
    font-size: var(--fs-16);
}

.reg-success-section-title {
    font-weight: 500;
    text-decoration: underline;
    color: var(--c-primary);
    font-size: var(--fs-16);

    margin-bottom: 4px;
    display: block;
}

.reg-success-list {
    margin: 0 0 20px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-16);
    line-height: 1.9;
}

.reg-success-card__btn-wrap {
    margin: 20px 0 20px;
}

.reg-btn--outline {
    background: var(--c-accent);
    color: var(--c-primary);
    border: none;
    border-radius: 3px;
    padding: 11px 32px;
    font-size: var(--fs-16);
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

.reg-success-note {
    font-size: var(--fs-16);
    color: #9a9088;
    line-height: 1.7;
    margin: 0;
}


.reg-body__bg {
    position: absolute;
    inset: 0;
    background: url(/img/bg/bg-register.png) center/cover no-repeat;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   Responsive — iPad (tablet)
   ============================================================ */
@media (max-width: 1024px) {
    .reg-header { padding: 0 20px; }
    .reg-page .ksam-body { padding: 24px 20px 48px; }

    .reg-terms-card { width: 100%; height: auto; max-height: 68vh; }
    .reg-terms { height: auto; max-height: calc(68vh - 80px); }

    .reg-form-card { padding: 28px 32px; }
    .reg-success-card { padding: 24px 32px; }
    .reg-checkbox-row { max-width: 100%; }
}

/* ============================================================
   Responsive — iPhone (mobile)
   ============================================================ */
@media (max-width: 600px) {
    .reg-header { height: 64px; padding: 0 14px; }
    .reg-header__logo { height: 64px; }
    .reg-page .ksam-body { padding: 16px 12px 32px; }

    .reg-progress { gap: 6px; margin-bottom: 28px; }

    /* back ชิดซ้าย, title ยังอยู่กลาง */
    .reg-title-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        min-height: auto;
        margin-bottom: 24px;
    }
    .reg-back { position: static; align-self: flex-start; }
    .reg-title { text-align: center; }

    /* ── เฉพาะหัวข้อหน้า Step6 (ข้อความยาว) — ลดฟอนต์บนมือถือ ── */
    .reg-title--compact { font-size: var(--fs-22); }

    .reg-form-card { padding: 20px 16px; gap: 18px; }

    /* OTP: ย่อช่องให้พอดีจอแคบ (font คุมโดย global --fs) */
    .reg-otp-card { padding: 24px 16px; }
    .reg-otp-inputs { gap: 6px; }
    .reg-otp-input { width: 44px; height: 56px; padding: 4px; }
    .reg-otp-ref { margin-bottom: 16px; }

    .reg-success-card { padding: 20px 16px; }

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