/*
 * Rejesho auth/membership — Stitch "Rejesho" Material-3 skin for the legacy
 * Bootstrap-based guest screens (tenant picker, 2FA, password reset, membership /
 * subscription pages). Tokens live in tokens.css; the typeform flow is skinned in
 * typeform.css. Class names are preserved so no Blade markup changes are required.
 */

body {
    background: var(--rj-bg);
    color: var(--rj-text);
    font-family: var(--rj-font);
    min-height: 100vh;
    position: relative;
}

/* legacy in-page logo — branding now lives in the layout header */
.logo { display: none; }

.custom-control-label {
    margin-bottom: 0;
    margin-top: 1px;
    -webkit-touch-callout: none;
    user-select: none;
}

/* ---- card ---- */
.card-signin {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border: 1px solid rgba(195, 197, 217, .5);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-surface);
    box-shadow: var(--rj-shadow);
}

.card-signin .card-header {
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--rj-text);
    border-top-left-radius: var(--rj-radius-lg);
    border-top-right-radius: var(--rj-radius-lg);
    background: var(--rj-surface);
    border-bottom: 1px solid rgba(195, 197, 217, .4);
}

.login-form-head {
    text-align: center;
    background: var(--rj-surface);
    padding: 30px 15px;
    border-bottom: 1px solid rgba(195, 197, 217, .4);
    border-top-left-radius: var(--rj-radius-lg);
    border-top-right-radius: var(--rj-radius-lg);
}

.login-form-head h4 {
    text-transform: none;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--rj-text);
    margin: 0;
}

.card-signin .card-body { padding: 1.5rem 2rem; }

.form-signin,
.form-signup {
    font-family: var(--rj-font);
    width: 100%;
}
.form-signin { text-align: center; }

.form-signin .btn,
.form-signup .btn { padding: 12px 20px; transition: all 0.2s; }

.form-signin .form-control,
.form-signup .form-control {
    padding: 12px 16px;
    height: 52px;
    background: var(--rj-input-bg);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius);
    color: var(--rj-text);
    font-size: 1rem;
}
.form-signin .form-control { text-align: center; }
.form-signup .form-control { font-weight: 400; }

.form-signin .form-control:focus,
.form-signup .form-control:focus,
.parent-box:focus-within {
    background: var(--rj-surface);
    border-color: var(--rj-cta);
    box-shadow: var(--rj-focus-ring);
    color: var(--rj-text);
}

select.form-control {
    height: 52px !important;
    padding: 12px 16px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--rj-input-bg);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cg%20fill%3D%22%23434656%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem top 50%;
    background-size: 0.65rem auto;
}

.custom-control-label:before { background: var(--rj-border); border-radius: 50% !important; }
.custom-control { display: inline-block; }

.parent-box .form-control { border: none; padding-left: 1px; font-weight: 600; background: transparent; }
.parent-box .form-control:focus { border: none; box-shadow: none; }

/* ---- buttons ---- */
.btn-primary {
    color: var(--rj-on-cta);
    background-color: var(--rj-cta);
    border-color: var(--rj-cta);
    border-radius: var(--rj-radius);
    font-weight: 700;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--rj-cta-hover);
    border-color: var(--rj-cta-hover);
}

.btn-register {
    text-align: center;
    display: block;
    color: var(--rj-primary);
    font-weight: 600;
    font-size: 16px !important;
}
.btn-register:hover { color: var(--rj-cta-hover); text-decoration: underline; }
.btn-register:active,
.btn-register:focus { border: none; box-shadow: none; outline: none; }

.tenant-link { color: var(--rj-primary); font-size: 16px; transition: all 0.2s; }
.tenant-link:hover { text-decoration: none; color: var(--rj-cta-hover); }

/* ---- alerts ---- */
.alert-success {
    color: var(--rj-success);
    background-color: var(--rj-success-bg);
    border-color: #71dd8c;
    border-radius: var(--rj-radius);
}

.two-factor-alert {
    background: var(--rj-surface);
    text-align: left;
    position: relative;
    font-size: 15px;
    width: 100%;
    margin: 0 auto 40px auto;
    padding: 14px 16px;
    border-radius: var(--rj-radius);
    border-width: 0 0 0 3px;
    border-style: solid;
    border-color: var(--rj-cta);
    box-shadow: 0 8px 16px rgba(10, 14, 29, 0.04), 0 8px 64px rgba(10, 14, 29, 0.08);
}

.iti { width: 100%; }
.fs-14 { font-size: 14px; }
.gradient-text { color: var(--rj-primary); }