/* ============================================================
   BP Custom Registration — Stylesheet
   ============================================================ */

/* --- Reset & Wrap --- */
.bpcr-wrap {
    --bpcr-accent:       #6c63ff;
    --bpcr-accent-soft:  #eef2ff;
    --bpcr-success:      #16a34a;
    --bpcr-success-soft: #f0fdf4;
    --bpcr-error:        #dc2626;
    --bpcr-error-soft:   #fef2f2;
    --bpcr-text:         #111827;
    --bpcr-text-muted:   #6b7280;
    --bpcr-border:       #e5e7eb;
    --bpcr-input-bg:     #f9fafb;
    --bpcr-radius:       10px;
    --bpcr-radius-lg:    16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    color: var(--bpcr-text);
    max-width: 620px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* --- Card --- */
.bpcr-card {
    background: #fff;
    border-radius: var(--bpcr-radius-lg);
    box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    padding: 2.5rem;
}

/* --- Header --- */
.bpcr-card__header {
    text-align: center;
    margin-bottom: 2rem;
}

.bpcr-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--bpcr-accent-soft);
    margin-bottom: 1rem;
}

.bpcr-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    color: var(--bpcr-text);
}

.bpcr-card__subtitle {
    font-size: .9rem;
    color: var(--bpcr-text-muted);
    margin: 0;
}

/* --- Fields --- */
.bpcr-field {
    margin-bottom: 1.25rem;
}

.bpcr-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 480px) {
    .bpcr-field-row { grid-template-columns: 1fr; }
    .bpcr-card { padding: 1.5rem; }
}

.bpcr-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--bpcr-text);
    margin-bottom: .4rem;
    text-transform: uppercase;
}

.bpcr-required {
    color: var(--bpcr-accent);
    margin-left: 2px;
}

/* --- Inputs --- */
.bpcr-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bpcr-input-prefix {
    position: absolute;
    left: .85rem;
    font-size: .95rem;
    color: var(--bpcr-text-muted);
    pointer-events: none;
    user-select: none;
}

.bpcr-input {
    width: 100%;
    padding: .7rem .9rem;
    font-size: .95rem;
    color: var(--bpcr-text);
    background: var(--bpcr-input-bg);
    border: 1.5px solid var(--bpcr-border);
    border-radius: var(--bpcr-radius);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

.bpcr-input--prefix { padding-left: 2rem; }
.bpcr-input--suffix { padding-right: 2.6rem; }

.bpcr-input:focus {
    border-color: var(--bpcr-accent);
    box-shadow: 0 0 0 3px rgba(108,99,255,.12);
    background: #fff;
}

.bpcr-input.is-invalid {
    border-color: var(--bpcr-error);
    box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}

.bpcr-input.is-valid {
    border-color: var(--bpcr-success);
}

/* --- Password toggle --- */
.bpcr-toggle-pw {
    position: absolute;
    right: .65rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--bpcr-text-muted);
    display: flex;
    align-items: center;
    transition: color .15s;
}

.bpcr-toggle-pw:hover { color: var(--bpcr-accent); }

/* --- Field errors --- */
.bpcr-field-error {
    display: block;
    font-size: .8rem;
    color: var(--bpcr-error);
    margin-top: .3rem;
    min-height: 1rem;
}

/* --- Password strength --- */
.bpcr-strength-bar {
    width: 100%;
    height: 4px;
    background: var(--bpcr-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: .35rem;
}

.bpcr-strength-bar__fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width .3s, background .3s;
}

.bpcr-strength-label {
    font-size: .78rem;
    color: var(--bpcr-text-muted);
}

/* --- Checkbox --- */
.bpcr-field--checkbox { margin-top: .5rem; }

.bpcr-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
}

.bpcr-checkbox { display: none; }

.bpcr-checkbox-custom {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--bpcr-border);
    border-radius: 5px;
    background: var(--bpcr-input-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    margin-top: 1px;
}

.bpcr-checkbox:checked + .bpcr-checkbox-custom {
    background: var(--bpcr-accent);
    border-color: var(--bpcr-accent);
}

.bpcr-checkbox:checked + .bpcr-checkbox-custom::after {
    content: '';
    display: block;
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.bpcr-checkbox-text {
    font-size: .85rem;
    color: var(--bpcr-text-muted);
    line-height: 1.5;
}

.bpcr-checkbox-text a {
    color: var(--bpcr-accent);
    text-decoration: none;
}
.bpcr-checkbox-text a:hover { text-decoration: underline; }

/* --- Submit Button --- */
.bpcr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .85rem;
    margin-top: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--bpcr-accent);
    border: none;
    border-radius: var(--bpcr-radius);
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 4px 14px rgba(108,99,255,.35);
}

.bpcr-btn:hover {
    background: #574ff0;
    box-shadow: 0 6px 20px rgba(108,99,255,.45);
}

.bpcr-btn:active { transform: scale(.98); }

.bpcr-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.bpcr-btn__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bpcr-spin .7s linear infinite;
}

.bpcr-btn.is-loading .bpcr-btn__spinner { display: block; }
.bpcr-btn.is-loading .bpcr-btn__text { opacity: .7; }

@keyframes bpcr-spin { to { transform: rotate(360deg); } }

/* --- Login hint --- */
.bpcr-login-hint {
    text-align: center;
    font-size: .85rem;
    color: var(--bpcr-text-muted);
    margin: 1rem 0 0;
}

.bpcr-login-hint a {
    color: var(--bpcr-accent);
    text-decoration: none;
    font-weight: 500;
}
.bpcr-login-hint a:hover { text-decoration: underline; }

/* --- Notices --- */
.bpcr-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    border-radius: var(--bpcr-radius);
    font-size: .9rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.bpcr-notice--success {
    background: var(--bpcr-success-soft);
    color: #14532d;
    border: 1px solid #bbf7d0;
}

.bpcr-notice--error {
    background: var(--bpcr-error-soft);
    color: #7f1d1d;
    border: 1px solid #fecaca;
}

.bpcr-notice--info {
    background: var(--bpcr-accent-soft);
    color: #312e81;
    border: 1px solid #c7d2fe;
}

.bpcr-notice__icon {
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* --- Success Screen --- */
#bpcr-step-success {
    text-align: center;
    padding: 1rem 0;
}

.bpcr-success-icon { margin-bottom: 1.5rem; }

.bpcr-success-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}

.bpcr-success-text {
    font-size: .95rem;
    color: var(--bpcr-text-muted);
    margin: 0 0 .5rem;
    line-height: 1.6;
}

.bpcr-success-hint {
    font-size: .85rem;
    color: var(--bpcr-text-muted);
    background: var(--bpcr-accent-soft);
    border-radius: var(--bpcr-radius);
    padding: .75rem 1rem;
    margin: 1rem 0 0;
}