/* ==========================================================================
   FBL THEME — Login & Registration (design handoff: split-screen auth)
   Left teal brand panel + right form panel. Wraps the real Botble auth form
   (fields / CSRF / validation / social login / phone widget preserved) and
   restyles it to the design. Scoped under .fbl-auth.
   ========================================================================== */

.fbl-auth {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    background: var(--fbl-bg);
}

/* ------------------------------------------------------------- Brand panel */
.fbl-auth-brand { display: none; }   /* hidden on mobile; shown >= 992px */

.fbl-auth-logo { display: inline-flex; align-items: center; gap: 9px; position: relative; z-index: 1; }
.fbl-auth-logo-tile {
    width: 34px; height: 34px; background: #fff; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: var(--fbl-brand); font-weight: 700; font-size: 16px; flex: none;
}
.fbl-auth-logo-text { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.01em; }

.fbl-auth-brand-mid { margin: auto 0; position: relative; z-index: 1; max-width: 400px; }
.fbl-auth-brand-title {
    font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; margin: 0;
    letter-spacing: -.015em;
}
.fbl-auth-brand-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fbl-auth-brand-list li {
    display: flex; gap: 12px; align-items: flex-start; color: var(--fbl-on-brand);
    font-size: 14px; line-height: 1.5;
}
.fbl-auth-brand-list .material-symbols-outlined { color: #fff; font-size: 18px; flex: none; margin-top: 1px; }
.fbl-auth-brand-foot { position: relative; z-index: 1; font-size: 12px; color: var(--fbl-on-brand-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.fbl-auth-brand-foot a { color: var(--fbl-on-brand-muted); }
.fbl-auth-brand-foot a:hover { color: #fff; }
.fbl-auth-brand-foot span { color: color-mix(in srgb, var(--fbl-brand) 65%, #fff); }

/* -------------------------------------------------------------- Form panel */
.fbl-auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--fbl-bg); }
.fbl-auth-inner { width: 100%; max-width: 440px; }
.fbl-auth-form { width: 100%; }

/* Mode switch (Sign in / Create account) */
.fbl-auth-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: var(--fbl-neutral-1); border-radius: 8px; padding: 4px; margin-bottom: 28px;
}
.fbl-auth-tabs a {
    border-radius: 6px; padding: 10px 0; text-align: center;
    font-size: 14px; font-weight: 600; color: var(--fbl-ink-2); background: transparent;
    transition: background .15s, color .15s, box-shadow .15s;
}
.fbl-auth-tabs a:hover { color: var(--fbl-ink); }
.fbl-auth-tabs a.is-active {
    background: #fff; color: var(--fbl-brand); box-shadow: 0 1px 3px rgba(26, 35, 33, .12);
}

.fbl-auth-title { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -.01em; color: var(--fbl-ink); }
.fbl-auth-sub { font-size: 14px; color: var(--fbl-ink-3); margin: 8px 0 24px; }

/* Role picker */
.fbl-auth-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.fbl-auth-role {
    text-align: start; border: 2px solid var(--fbl-border); background: #fff; border-radius: 8px;
    padding: 14px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s;
}
.fbl-auth-role:hover { border-color: var(--fbl-border-strong); }
.fbl-auth-role.is-active { border-color: var(--fbl-brand); background: var(--fbl-brand-tint); }
.fbl-auth-role-title { display: block; font-size: 14px; font-weight: 600; color: var(--fbl-ink); }
.fbl-auth-role.is-active .fbl-auth-role-title { color: var(--fbl-brand); }
.fbl-auth-role-desc { display: block; font-size: 12px; color: var(--fbl-ink-3); margin-top: 3px; line-height: 1.4; }
.fbl-auth-role-note {
    display: flex; align-items: center; gap: 8px; margin: 0 0 20px;
    font-size: 12.5px; color: var(--fbl-brand); background: var(--fbl-brand-tint);
    border-radius: 8px; padding: 10px 12px;
}
.fbl-auth-role-note .material-symbols-outlined { font-size: 17px; }
.fbl-auth-roles + .fbl-auth-form-fields { margin-top: 0; }

/* --------------------------------------- Botble form restyle (scoped auth) */
/* Drop the card chrome — the panel IS the card. */
.fbl-auth .auth-card,
.fbl-auth .auth-card.card {
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    border-radius: 0; margin: 0;
}
.fbl-auth .auth-card__body { padding: 0 !important; }

/* Fields */
.fbl-auth .form-group,
.fbl-auth .mb-3 { margin-bottom: 16px !important; }
.fbl-auth label,
.fbl-auth .form-label,
.fbl-auth .control-label {
    display: block; font-size: 13px; font-weight: 500; color: var(--fbl-ink);
    margin-bottom: 6px;
}
.fbl-auth .form-control,
.fbl-auth input[type="text"],
.fbl-auth input[type="email"],
.fbl-auth input[type="password"],
.fbl-auth input[type="tel"],
.fbl-auth select,
.fbl-auth .form-select {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--fbl-border-strong); border-radius: 6px;
    padding: 12px 14px; font-size: 14px; font-family: inherit; background: #fff; color: var(--fbl-ink);
    height: auto; line-height: 1.4; box-shadow: none;
}
.fbl-auth .form-control:focus,
.fbl-auth select:focus {
    border-color: var(--fbl-brand); outline: 2px solid var(--fbl-brand-tint-2); outline-offset: 0; box-shadow: none;
}
.fbl-auth .form-control::placeholder { color: var(--fbl-ink-3); }

/* Leading field icons from the form builder are hidden for the clean design look;
   reset the icon-padding the builder adds to the input (.ps-5). */
.fbl-auth .auth-input-icon,
.fbl-auth .input-group-text,
.fbl-auth .input-group > .input-group-prepend { display: none !important; }
.fbl-auth .input-group { display: block; }
.fbl-auth .input-group > .form-control { border-radius: 6px !important; }
.fbl-auth .form-control.ps-5 { padding-inline-start: 14px !important; }

/* Field-level validation (Botble adds .is-invalid + .invalid-feedback) */
.fbl-auth .form-control.is-invalid,
.fbl-auth .is-invalid .form-control { border-color: var(--fbl-danger); background: var(--fbl-danger-bg); }
.fbl-auth .invalid-feedback,
.fbl-auth .text-danger { font-size: 12px; color: var(--fbl-danger); font-weight: 500; margin-top: 5px; }

/* Remember / terms checkboxes */
.fbl-auth .form-check,
.fbl-auth .form-switch { padding-left: 0 !important; margin: 4px 0 0; min-height: auto; display: flex; align-items: center; gap: 9px; }
.fbl-auth .form-check .form-check-input,
.fbl-auth .form-switch .form-check-input {
    width: 16px; height: 16px; margin: 0 !important; margin-inline: 0 !important; float: none !important;
    position: static !important; accent-color: var(--fbl-brand);
    border-radius: 4px; flex: none;
}
.fbl-auth .form-switch .form-check-input { width: 34px; height: 18px; border-radius: 999px; }
.fbl-auth .form-check-label,
.fbl-auth .form-check label { font-size: 13.5px; font-weight: 400; color: var(--fbl-ink-2); margin: 0; }

/* Forgot-password row (login) */
.fbl-auth .row.g-0 { display: flex; align-items: center; margin: 4px 0; }
.fbl-auth .row.g-0 .col-6:last-child { margin-left: auto; text-align: end; }
.fbl-auth a.text-decoration-underline { font-size: 12.5px; font-weight: 500; color: var(--fbl-brand); }
.fbl-auth a.text-decoration-underline:hover { color: var(--fbl-brand-deep); }

/* Submit */
.fbl-auth .d-grid { margin-top: 20px; }
.fbl-auth .btn-auth-submit,
.fbl-auth .btn-primary {
    width: 100%; background: var(--fbl-brand); border: 0; color: #fff;
    border-radius: 6px; padding: 13px 0; font-size: 15px; font-weight: 600; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s;
}
.fbl-auth .btn-auth-submit:hover,
.fbl-auth .btn-primary:hover { background: var(--fbl-brand-deep); color: #fff; }
.fbl-auth .btn-auth-submit i,
.fbl-auth .btn-primary i { display: none; }   /* hide the arrow icon — design has none */

/* Register / login switch link (already have tabs) — mute it */
.fbl-auth .auth-card__body .mt-3.text-center { margin-top: 18px !important; font-size: 13px; color: var(--fbl-ink-3); }

/* Session alerts */
.fbl-auth .alert {
    border-radius: 8px; padding: 12px 16px; font-size: 13px; line-height: 1.5;
    border: 1px solid transparent; margin-bottom: 18px;
}
.fbl-auth .alert-success { background: var(--fbl-success-bg); border-color: var(--fbl-success-border); color: color-mix(in srgb, var(--fbl-success) 55%, #000); }
.fbl-auth .alert-danger { background: var(--fbl-danger-bg); border-color: var(--fbl-danger-border); color: color-mix(in srgb, var(--fbl-danger) 55%, #000); }
.fbl-auth .alert-warning { background: var(--fbl-amber-bg); border-color: var(--fbl-amber-border); color: color-mix(in srgb, var(--fbl-amber) 55%, #000); }

/* ------------------------------------------------- Social login ("continue with") */
.fbl-auth .login-options,
.fbl-auth .card-login {
    margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.fbl-auth .social-login,
.fbl-auth .login-options a,
.fbl-auth .card-login a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #fff; border: 1px solid var(--fbl-border-strong); border-radius: 6px;
    padding: 11px 0; font-size: 13.5px; font-weight: 600; color: var(--fbl-ink);
    transition: border-color .15s;
}
.fbl-auth .social-login:hover,
.fbl-auth .login-options a:hover,
.fbl-auth .card-login a:hover { border-color: var(--fbl-brand); color: var(--fbl-brand); }
.fbl-auth .social-login img { width: 18px; height: 18px; }

/* "or continue with" divider — injected before the social block */
.fbl-auth-or {
    display: flex; align-items: center; gap: 14px; margin: 22px 0 0;
    font-size: 12px; color: var(--fbl-ink-3);
}
.fbl-auth-or::before, .fbl-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--fbl-border); }

/* ===================================================== DESKTOP (split) ===== */
@media (min-width: 992px) {
    .fbl-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
    .fbl-auth-brand {
        display: flex; flex-direction: column; position: relative; overflow: hidden;
        padding: 48px 52px;
        background: linear-gradient(160deg, var(--fbl-brand-deep) 0%, var(--fbl-brand) 100%);
    }
    .fbl-auth-brand::before {
        content: ""; position: absolute; inset: 0;
        background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .03) 16px, transparent 16px, transparent 32px);
    }
    .fbl-auth-panel { padding: 48px 40px; }
}