/* ============================================================
   ConnecXion — Registration Page Override
   Loads after buddypress.min.css — overrides only what's needed
   Tokens used: --cx-primary, --cx-primary-container,
   --cx-surface, --cx-surface-low, --cx-outline-variant,
   --cx-on-surface, --cx-on-surface-variant, --cx-error,
   --cx-font-headline, --cx-font-body,
   --cx-shadow-editorial, --cx-shadow-btn
   ============================================================ */

body.buddypress.activate.login-split-page #primary, body.buddypress.register.login-split-page #primary{
    /* margin-left: auto !important; */
}

body.buddypress.activate.login-split-page #primary, body.buddypress.register.login-split-page #primary .site-main{
    display: flex;
    flex-direction: column;
}


.bb-password-wrap a.bb-toggle-password{
    top:50% !important
}

/* ── Page background ── */
.bs-bp-container-reg,
.bs-bp-container-reg .site-main,
.bs-bp-container-reg .content-area,
#buddypress.buddypress-wrap.extended-default-reg {
    /* background: var(--cx-surface) !important; */
}

/* ── Center layout ── */
.bs-bp-container-reg .site-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
    padding: 130px 1.5rem 60px !important;
    max-width: 100% !important;
}

.bs-bp-container-reg .entry-header {
    display: none !important;
}

/* ── Logo ── */
.register-section-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.register-section-logo .bb-logo {
    height: 36px;
    width: auto;
}

/* ── Constrain width ── */
#register-page,
#buddypress.buddypress-wrap.extended-default-reg {
    width: 100%;
    max-width: 480px;
    margin: 0 auto !important;
    padding-top: 0 !important;
}

/* ── Card ── */
#register-page form#signup-form {
    background: #ffffff;
    border: 1px solid var(--cx-outline-variant);
    border-radius: 20px;
    box-shadow: var(--cx-shadow-editorial);
    overflow: hidden;
    padding: 0;
}

#register-page form#signup-form::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--cx-primary) 0%, var(--cx-primary-container) 100%);
}

/* ── Card body ── */
#register-page form#signup-form .layout-wrap {
    padding: 2rem 2rem 0;
}

#register-page form#signup-form .layout-wrap::before {
    content: 'Create Your Account';
    display: block;
    font-family: var(--cx-font-headline);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cx-primary);
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

#register-page form#signup-form .layout-wrap::after {
    content: 'Join the ConnecXion.io business network — Metro Atlanta';
    display: block;
    font-size: 0.875rem;
    color: var(--cx-on-surface-variant);
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

/* ── Section blocks ── */
#basic-details-section {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--cx-outline-variant);
    margin-bottom: 0;
}

#basic-details-section::before {
    content: 'Account Details';
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cx-on-surface-variant);
    margin-bottom: 1rem;
}

#profile-details-section {
    display: flex;
    flex-direction: column;
    padding-top: 1.25rem;
}

#profile-details-section::before {
    content: 'Business Profile';
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cx-on-surface-variant);
    margin-bottom: 1rem;
}

/* ── Fieldsets ── */
#signup-form fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

/* ── Labels / Legends ── */
#signup-form legend,
#signup-form label,
.bb-signup-field label {
    display: block !important;
    font-family: var(--cx-font-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: var(--cx-on-surface) !important;
    margin-bottom: 0.45rem !important;
}

.bp-optional-field-label {
    font-weight: 400 !important;
    color: var(--cx-on-surface-variant) !important;
    font-size: 0.75rem !important;
}

/* ── Inputs ── */
#signup-form input[type="text"],
#signup-form input[type="email"],
#signup-form input[type="password"],
#signup-form input[type="tel"],
#signup-form select {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--cx-surface-low) !important;
    border: 1.5px solid var(--cx-outline-variant) !important;
    border-radius: 8px !important;
    padding: 0.8125rem 1rem !important;
    font-family: var(--cx-font-body) !important;
    font-size: 0.9375rem !important;
    color: var(--cx-on-surface) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none;
    appearance: none;
    height: auto !important;
    min-height: unset !important;
}

#signup-form input[type="text"]:focus,
#signup-form input[type="email"]:focus,
#signup-form input[type="password"]:focus,
#signup-form input[type="tel"]:focus,
#signup-form select:focus {
    border-color: var(--cx-primary-container) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(91, 45, 142, 0.12) !important;
}

#signup-form input:hover:not(:focus),
#signup-form select:hover:not(:focus) {
    border-color: var(--cx-outline-variant) !important;
}

/* Select arrow */
#signup-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c7482' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    padding-right: 2.5rem !important;
    cursor: pointer;
}

/* ── Password toggle ── */
.bb-password-wrap {
    position: relative;
}

.bb-password-wrap input[type="password"] {
    padding-right: 3rem !important;
}

.bb-toggle-password {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cx-on-surface-variant);
    opacity: 0.6;
    transition: opacity 0.2s ease;
    text-decoration: none;
    z-index: 2;
}

.bb-toggle-password:hover {
    opacity: 1;
    color: var(--cx-primary);
}

/* ── Password strength ── */
#pass-strength-result {
    font-size: 0.75rem !important;
    margin-top: 6px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    border: none !important;
    text-align: left !important;
}

#pass-strength-result.short,
#pass-strength-result.bad  { background: #ffdad6 !important; color: var(--cx-error) !important; }
#pass-strength-result.good { background: rgba(254,217,119,.35) !important; color: #755b00 !important; }
#pass-strength-result.strong { background: rgba(67,16,118,.08) !important; color: var(--cx-primary) !important; }

/* ── Privacy note ── */
.register-privacy-info {
    font-size: 0.8125rem !important;
    color: var(--cx-on-surface-variant) !important;
    text-align: center !important;
    padding: 0.75rem 2rem 1rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.register-privacy-info a {
    color: var(--cx-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 12px;
}
.bs-bp-container-reg #buddypress #signup-form.standard-form div.error .error,
.bb-signup-field.signup_email .error{
    background: #ffdad6 !important;
}
.bs-bp-container-reg #buddypress #signup-form.standard-form div.error{
    /* background-color: unset !important; */
    border-radius: 8px !important;
}
div.error{
    padding: 0 !important;
}


.register-privacy-info a:hover {
    text-decoration: underline !important;
}

/* ── Submit ── */
#signup-form .submit {
    padding: 0 2rem 2rem !important;
    margin: 0 !important;
}

#signup-form .submit input[type="submit"],
#signup-form #signup_submit {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, var(--cx-primary) 0%, var(--cx-primary-container) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.9375rem 1.5rem !important;
    font-family: var(--cx-font-body) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: var(--cx-shadow-btn) !important;
    transition: opacity 0.2s ease, transform 0.15s ease !important;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: unset !important;
}

#signup-form .submit input[type="submit"]:hover,
#signup-form #signup_submit:hover {
    opacity: 0.9 !important;
    box-shadow: 0 6px 20px rgba(67,16,118,.35) !important;
}

#signup-form .submit input[type="submit"]:active,
#signup-form #signup_submit:active {
    transform: scale(0.985) !important;
}

/* ── Bottom "already have account" bar ── */
/* .pmpro_actions_nav {
    background: var(--cx-surface-low);
    border-top: 1px solid var(--cx-outline-variant);
    text-align: center;
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--cx-on-surface-variant);
} */

.pmpro_actions_nav a {
    font-weight: 700 !important;
    color: var(--cx-primary-container) !important;
    text-decoration: none !important;
    font-family: var(--cx-font-body) !important;
    font-size: 0.875rem !important;
}

.pmpro_actions_nav a:hover {
    color: var(--cx-primary) !important;
    text-decoration: underline !important;
}

/* ── Error / success notices ── */
#buddypress #register-page .bp-feedback,
#buddypress #register-page .bp-template-notice {
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    padding: 0.875rem 1rem !important;
    margin-bottom: 1rem !important;
    border: none !important;
}

#buddypress #register-page .bp-feedback.error,
#buddypress #register-page .bp-template-notice.error {
    background: #ffdad6 !important;
    color: var(--cx-error) !important;
    border-left: 3px solid var(--cx-error) !important;
}

#buddypress #register-page .bp-feedback.updated {
    background: rgba(67,16,118,.06) !important;
    color: var(--cx-primary) !important;
    border-left: 3px solid var(--cx-primary-container) !important;
}

/* ── Hide split hero ── */
/* .login-split { display: none !important; } */

/* ── Mobile ── */
@media (max-width: 640px) {

    .login-split{
        margin-top: 80px;

    }
    .login-split__entry h1{
        font-size: 40px !important;
    }

    #register-page, #buddypress.buddypress-wrap.extended-default-reg{
        padding: 0 !important;
    }

    body.buddypress.activate article.bp_activate, body.buddypress.register article.bp_register{
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 14px;
    }

    .bs-bp-container-reg .site-main {
        padding: 40px 1rem 40px !important;
    }
    #register-page form#signup-form .layout-wrap {
        padding: 1.5rem 1.25rem 0 !important;
    }
    #signup-form .submit {
        padding: 0 1.25rem 1.5rem !important;
    }
    .register-privacy-info {
        padding-inline: 1.25rem !important;
    }
    #register-page form#signup-form .layout-wrap::before {
        font-size: 1.25rem;
    }
}