/* Register pages (JoinType.aspx, CreateCustomer.aspx). These sit inside DWCMaster.master,
   so only the content area is styled here. Shared colours and components come from
   css/beyoung-theme.css */

.reg-page
{
    padding: 36px 0 56px;
    background: #f3ecf5;
    background: radial-gradient(circle at 88% 8%, #f7dcec 0%, rgba(247, 220, 236, 0) 40%),
                radial-gradient(circle at 6% 96%, #e3d3ef 0%, rgba(227, 211, 239, 0) 45%),
                #f5f0f8;
}

.reg-container
{
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}

.reg-eyebrow
{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--by-primary);
}

.reg-title
{
    margin: 8px 0 8px;
    padding: 0;
    font-family: var(--by-font);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--by-text);
}

.reg-lead
{
    margin: 0 0 26px;
    font-family: var(--by-font);
    font-size: 16px;
    color: var(--by-text-muted);
}

/* ---------- JoinType: choose how to join ---------- */
.join-grid
{
    display: flex;
    align-items: flex-start;
}

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

/* the banner keeps its own shape (no stretching / cropping) */
.join-side
{
    flex: 0 0 40%;
    max-width: 460px;
    margin-left: 32px;
    border-radius: var(--by-radius-lg);
    overflow: hidden;
    box-shadow: var(--by-shadow);
}

.join-side img
{
    display: block;
    width: 100%;
    height: auto;
}

.join-option
{
    display: flex;
    margin-bottom: 20px;
    padding: 26px;
}

.join-option:last-child
{
    margin-bottom: 0;
}

.join-icon
{
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    margin-right: 20px;
    border-radius: 14px;
    background: #f6eef5;
    font-size: 22px;
    line-height: 52px;
    text-align: center;
    color: var(--by-primary);
}

.join-body
{
    flex: 1;
    min-width: 0;
}

.join-option h2
{
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--by-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--by-text);
}

.join-option p
{
    margin: 0 0 10px;
    font-family: var(--by-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--by-text-muted);
}

.join-option .by-btn
{
    margin-top: 8px;
}

/* ---------- CreateCustomer: mobile / email / OTP ---------- */
.reg-card
{
    max-width: 480px;
    margin: 0 auto;
    padding: 36px 40px 30px;
}

.reg-card-wide
{
    max-width: 820px;
}

.reg-card .reg-title
{
    font-size: 26px;
}

.reg-card .reg-lead
{
    font-size: 15px;
}

.reg-actions .by-btn
{
    margin-top: 6px;
}

.reg-sponsor-name
{
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--by-danger);
}

.reg-sponsor-name:empty
{
    display: none;
}

.reg-agreement
{
    height: 150px;
}

.reg-submit
{
    max-width: 320px;
    margin: 0 auto;
}

.reg-resend
{
    margin-top: 12px;
    text-align: center;
}

.reg-foot
{
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid #ece7f0;
    font-family: var(--by-font);
    font-size: 15px;
    text-align: center;
    color: var(--by-text-muted);
}

.reg-foot a
{
    font-weight: 600;
}

/* ---------- regisuccess: registration done ---------- */
.reg-success
{
    max-width: 520px;
    text-align: center;
}

.reg-success-icon
{
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e7f6ec;
    font-size: 32px;
    line-height: 72px;
    color: #1e8e4a;
}

.reg-credentials
{
    margin: 0 0 24px;
    padding: 4px 20px;
    border: 1px dashed #cdb9d6;
    border-radius: var(--by-radius);
    background: #faf7fc;
    text-align: left;
}

.reg-credential
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 0;
}

.reg-credential + .reg-credential
{
    border-top: 1px solid var(--by-border-soft);
}

.reg-credential dt
{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--by-text-muted);
}

.reg-credential dd
{
    margin: 0 0 0 16px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .5px;
    word-break: break-all;
    color: var(--by-text);
}

.reg-success-actions
{
    display: flex;
    margin: 0 -6px;
}

.reg-success-actions .by-btn
{
    flex: 1 1 0;
    margin: 0 6px;
    padding: 0 10px;
    font-size: 15px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px)
{
    .join-side
    {
        display: none;
    }
}

@media (max-width: 767px)
{
    .reg-page
    {
        padding: 22px 0 36px;
    }

    .reg-title
    {
        font-size: 26px;
    }

    .join-option
    {
        display: block;
        padding: 22px 18px;
    }

    .join-icon
    {
        margin: 0 0 14px;
    }

    .join-option .by-btn
    {
        display: block;
        width: 100%;
    }

    .reg-card
    {
        padding: 26px 20px 22px;
    }

    .reg-card .reg-title
    {
        font-size: 22px;
    }
}

@media (max-width: 480px)
{
    .reg-success-actions
    {
        display: block;
        margin: 0;
    }

    .reg-success-actions .by-btn
    {
        display: block;
        margin: 0 0 12px;
    }
}