/* Bifton auth pages (login / register / reset) — tokens + layout. */
:root {
    /* Brand — "encre et bleu" (the two logo colors) */
    --bf-primary: #2f74c0;
    --bf-primary-600: #255f9f;
    --bf-primary-700: #14365e;
    --bf-primary-50: #e9f1fb;
    --bf-primary-100: #d3e3f6;
    --bf-ink: #0e1a2b;
    --bf-ink-2: #334155;
    --bf-muted: #64748b;
    --bf-subtle: #94a3b8;

    /* Dark chrome (header) */
    --bf-dark: #0e1a2b;
    --bf-dark-2: #1a2940;
    --bf-dark-3: #24354f;
    --bf-dark-border: #22324a;
    --bf-dark-text: #e6edf6;
    --bf-dark-muted: #9fb3cc;
    --bf-dark-accent: #8fbdf0;
    --bf-dark-success: #4ade80;
    --bf-dark-danger: #ff8a8d;
    --bf-dark-warning: #fbbf5a;

    /* Surfaces */
    --bf-bg: #f6f7f9;
    --bf-surface: #ffffff;
    --bf-surface-2: #f8fafc;
    --bf-border: #e4e8ee;
    --bf-border-strong: #cdd5df;

    /* Semantic */
    --bf-success: #16a34a;
    --bf-success-50: #e8f7ee;
    --bf-danger: #e5484d;
    --bf-danger-50: #fdecec;
    --bf-warning: #e08a00;
    --bf-warning-50: #fff5e0;
    --bf-info: #0ea5e9;
    --bf-info-50: #e6f6fd;

    /* Mobile money accents */
    --bf-mtn: #ffcc00;
    --bf-orange: #ff7900;

    /* Shape & depth */
    --bf-radius-sm: 10px;
    --bf-radius: 14px;
    --bf-radius-lg: 20px;
    --bf-radius-pill: 999px;
    --bf-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --bf-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 16px rgba(15, 23, 42, .05);
    --bf-shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);
    --bf-ring: 0 0 0 4px rgba(46, 109, 180, .18);

    --bf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bf-header-h: 64px;
    --bf-container: 1440px;
}
/* =====================================================================
   Auth pages (login / register / reset)
   ===================================================================== */
.bf-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--bf-surface);
}
.bf-auth__brand {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(900px 500px at 110% 110%, rgba(47, 116, 192, .55), transparent 60%),
        radial-gradient(700px 400px at -10% -10%, rgba(255, 255, 255, .06), transparent 60%),
        linear-gradient(160deg, #0e1a2b 0%, #14365e 100%);
}
.bf-auth__brand::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 60px solid rgba(255, 255, 255, .06);
    pointer-events: none;
}
.bf-auth__logo {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: var(--bf-shadow);
}
.bf-auth__logo img { height: 28px; width: auto; display: block; }
.bf-auth__headline {
    font-size: 40px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #fff;
    margin: 0 0 16px;
    max-width: 520px;
}
.bf-auth__lead {
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    max-width: 460px;
    margin: 0 0 32px;
}
.bf-auth__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 460px; }
.bf-auth__features li { display: flex; gap: 14px; align-items: flex-start; color: rgba(255, 255, 255, .9); font-size: 15px; }
.bf-auth__features i {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
}
.bf-auth__features strong { display: block; color: #fff; font-weight: 650; }
.bf-auth__wallets { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.bf-auth__wallets img { height: 28px; width: 28px; border-radius: 8px; object-fit: cover; background: #fff; }

.bf-auth__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 24px;
    background: var(--bf-surface);
}
.bf-auth__card { width: 100%; max-width: 420px; margin: 0 auto; }
.bf-auth__mobile-logo { display: none; margin-bottom: 24px; }
.bf-auth__mobile-logo img { height: 32px; }
.bf-auth__title { font-size: 26px; font-weight: 750; color: var(--bf-ink); margin: 0 0 6px; letter-spacing: -.02em; }
.bf-auth__subtitle { color: var(--bf-muted); margin: 0 0 24px; font-size: 15px; }

.bf-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--bf-surface-2);
    border: 1px solid var(--bf-border);
    border-radius: 12px;
    margin-bottom: 24px;
}
.bf-segment button {
    border: 0;
    background: transparent;
    padding: 9px 12px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 14px;
    color: var(--bf-muted);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.bf-segment button.active { background: var(--bf-surface); color: var(--bf-ink); box-shadow: var(--bf-shadow-sm); }
.bf-segment button:focus { outline: 0; box-shadow: var(--bf-ring); }

.bf-field { margin-bottom: 16px; }
.bf-field > label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--bf-ink-2); }
.bf-field__row { display: flex; justify-content: space-between; align-items: baseline; }
.bf-field__row a { font-size: 13px; font-weight: 600; }
.bf-help { display: block; margin-top: 6px; font-size: 12.5px; color: var(--bf-muted); }

.bf-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-choice label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--bf-border-strong);
    border-radius: var(--bf-radius-sm);
    cursor: pointer;
    font-weight: 600;
    color: var(--bf-ink-2);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.bf-choice label i { color: var(--bf-subtle); width: 16px; text-align: center; }
.bf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.bf-choice input:checked + label,
.bf-choice label.active {
    border-color: var(--bf-primary);
    background: var(--bf-primary-50);
    color: var(--bf-primary-700);
    box-shadow: 0 0 0 1px var(--bf-primary) inset;
}
.bf-choice input:checked + label i { color: var(--bf-primary); }
.bf-choice input:focus + label { box-shadow: var(--bf-ring); }

.bf-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; color: var(--bf-ink-2); cursor: pointer; }
.bf-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--bf-primary); flex: 0 0 18px; }

.bf-auth .btn-block { width: 100%; }
.bf-auth__footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--bf-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--bf-muted);
}
.bf-auth__footer a { color: var(--bf-ink-2); font-weight: 500; }
.bf-lang { display: inline-flex; gap: 2px; padding: 3px; background: var(--bf-surface-2); border-radius: 9px; border: 1px solid var(--bf-border); }
.bf-lang a { padding: 3px 10px; border-radius: 7px; font-weight: 600; color: var(--bf-muted); }
.bf-lang a.active { background: var(--bf-surface); color: var(--bf-ink); box-shadow: var(--bf-shadow-sm); }

@media (max-width: 991.98px) {
    .bf-auth { grid-template-columns: 1fr; }
    .bf-auth__brand { display: none; }
    .bf-auth__mobile-logo { display: block; }
    .bf-auth__panel { justify-content: flex-start; padding: 32px 16px; }
}


/* Color Admin 5 integration */
.bf-auth a { text-decoration: none; }
.bf-auth a:hover { text-decoration: underline; }
.bf-auth .bf-check a, .bf-auth .bf-help a { text-decoration: underline; }
.bf-auth .app-loader, body.pace-top .app-loader { background: #fff; }
body.pace-top .pace { top: 0; }
.bf-auth h1, .bf-auth h2 { font-family: var(--bf-display, "Sora", sans-serif); }
.bf-auth__back { display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--bf-muted); margin-bottom: 24px; }
.bf-auth__back:hover { color: var(--bf-ink); }
.bf-auth__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--bf-primary-50); color: var(--bf-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
.bf-code-input { font-family: var(--bf-display, "Sora", sans-serif); font-size: 22px; font-weight: 700; letter-spacing: .4em; text-align: center; height: 56px; }
.bf-auth .btn-lg { height: 48px; border-radius: 12px; font-weight: 700; }
.bf-auth .form-control { height: 46px; border-radius: 10px; }
.bf-auth .btn-link { text-decoration: none; font-weight: 600; }

.bf-auth__back { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: #2f74c0; text-decoration: none; margin-bottom: 14px; }
.bf-auth__back:hover { text-decoration: underline; }

/* ===== Auth v2: aligned with the public landing page ===== */
.bf-auth .bf-auth__brand {
    background:
        radial-gradient(900px 520px at 90% 0%, rgba(59, 140, 224, .45), transparent 60%),
        radial-gradient(600px 400px at 0% 100%, rgba(59, 140, 224, .18), transparent 60%),
        linear-gradient(160deg, #0a1a3f 0%, #0f2a63 100%) !important;
}
.bf-auth__brand::after { border-color: rgba(90, 167, 255, .08); }
.bf-auth__logo { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0; }
.bf-auth .bf-auth__logo img { height: 46px !important; }
.bf-auth__headline { font-family: Sora, Manrope, sans-serif; font-size: clamp(30px, 3.2vw, 44px); }
.bf-auth__lead { color: #c3d2ea; }
.bf-auth__features li { color: #c3d2ea; }
.bf-auth__features i { background: rgba(90, 167, 255, .16); color: #8cc2ff; border: 1px solid rgba(140, 194, 255, .18); }
.bf-auth__wallets { color: #a9bddc; }
.bf-auth .bf-auth__panel { background: #f4f8fd; }
.bf-auth .bf-auth__card { background: #fff; border: 1px solid #e3eaf3; border-radius: 24px; padding: 32px 32px 26px; box-shadow: 0 24px 60px rgba(15, 23, 42, .08); max-width: 460px; }
.bf-auth__back { margin-bottom: 18px; }
.bf-auth .bf-auth__card .bf-segment { background: #f4f8fd; border: 0; border-radius: 999px; padding: 5px; }
.bf-auth .bf-auth__card .bf-segment button { border-radius: 999px !important; font-weight: 700; }
.bf-auth .bf-auth__card .bf-segment button.active { background: #fff !important; color: #2f74c0 !important; box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
.bf-auth .bf-auth__title { font-family: Sora, Manrope, sans-serif; }
.bf-auth .bf-auth__card .form-control, .bf-auth__card .iti input { border-radius: 12px !important; min-height: 46px; border-color: #d9e2ec; }
.bf-auth .bf-auth__card .form-control:focus { border-color: #2f74c0; box-shadow: 0 0 0 3px rgba(47, 116, 192, .15); }
.bf-auth .bf-auth__card .btn-primary { border-radius: 999px !important; min-height: 48px; font-weight: 700; box-shadow: 0 10px 22px rgba(47, 116, 192, .25); }
.bf-auth .bf-auth__card .btn-primary:disabled { box-shadow: none; }
.bf-auth__mobile-logo img { height: 34px; }
@media (max-width: 991.98px) {
    .bf-auth__panel { background: #f4f8fd; }
    .bf-auth .bf-auth__card { padding: 24px 20px; border-radius: 20px; }
}

.bf-auth .bf-auth__wallets img { background: none !important; border-radius: 8px; height: 30px; width: 30px; object-fit: cover; }