/* =====================================================================
   Kariux Auth — EXACT "Become a Partner" design, light + dark.
   Vars flip on body.kx-auth-dark (set by #kxAuthToggle). Left brand
   panel stays dark; right form panel follows the theme.
   ===================================================================== */
:root { --kx: var(--button, #ff521c); }

body.kx-auth {
    --ap-bg: #ffffff; --ap-ink: #0c1116; --ap-soft: #5a6470; --ap-line: #e8ecf1; --ap-field: #f6f8fb;
    margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--ap-bg); color: var(--ap-ink);
}
body.kx-auth.kx-auth-dark {
    --ap-bg: #0a0d12; --ap-ink: #f3f6fa; --ap-soft: #aab4c0; --ap-line: #20293a; --ap-field: #121821;
}

#kxAuthToggle {
    position: fixed; right: 22px; bottom: 22px; z-index: 1000; width: 48px; height: 48px;
    border: none; border-radius: 50%; background: var(--kx); color: #fff; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .2s;
}
#kxAuthToggle:hover { transform: translateY(-3px) rotate(-8deg); }

.ap-wrap { min-height: 100vh; display: grid; grid-template-columns: 42% 58%; }

/* left brand panel */
.ap-left {
    position: relative; overflow: hidden; color: #fff; padding: 52px 48px;
    display: flex; flex-direction: column; justify-content: space-between;
    background: radial-gradient(900px 500px at 30% 10%, color-mix(in srgb, var(--kx) 42%, transparent), transparent 60%), linear-gradient(160deg, #0b0f17, #141b28);
    background-size: cover; background-position: center;
}
.ap-left .brand img { max-height: 42px; }
.ap-left .brand span { font-size: 24px; font-weight: 800; color: #fff; }
.ap-left h1 { font-weight: 800; font-size: 34px; line-height: 1.2; margin: 26px 0 14px!important; }
.ap-left > div > p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; margin: 0; max-width: 420px; margin-bottom: 15px!important;}
.ap-perk { display: flex; gap: 12px; align-items: center; margin-bottom: 16px!important; color: rgba(255,255,255,.88); }
.ap-perk i { color: var(--kx); font-size: 20px; }
.ap-perk strong { font-weight: 600; }
.ap-back { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14px; font-weight: 500; }
.ap-back:hover { color: #fff; }

/* right form panel */
.ap-right { background: var(--ap-bg); padding: 48px; display: flex; align-items: center; overflow-y: auto; }
.ap-card { width: 100%; max-width: 480px; margin: 0 auto; }
.ap-head-title { font-size: 26px; font-weight: 800; color: var(--ap-ink); margin: 0 0 6px; line-height: 2; }
.ap-head-info { color: var(--ap-soft); font-size: 14px; margin: 0 0 26px!important; }
.ap-head-info a, .ap-link { color: var(--kx); font-weight: 600; text-decoration: none; }

label.fl { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; color: var(--ap-ink); }
.ap-card .form-control { width: 100%; background: var(--ap-field); border: 1px solid var(--ap-line); color: var(--ap-ink); border-radius: 11px; padding: 13px 16px; font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.ap-card .form-control:focus { border-color: var(--kx); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kx) 14%, transparent); background: var(--ap-bg); }
.ap-card .form-control::placeholder { color: var(--ap-soft); }
.ap-card .input-group-text { background: var(--ap-field); border: 1px solid var(--ap-line); color: var(--ap-soft); }

.btn-kx { width: 100%; background: var(--kx); border: none; color: #fff; font-weight: 700; border-radius: 11px; padding: 14px 26px; font-size: 15px; cursor: pointer; transition: filter .2s, transform .2s, box-shadow .2s; }
.btn-kx:hover { filter: brightness(.96); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px color-mix(in srgb, var(--kx) 35%, transparent); }

.ap-forgot { display: flex; justify-content: flex-end; margin: 8px 0 16px; }
.ap-forgot a { color: var(--kx); font-size: 13px; font-weight: 600; text-decoration: none; }
.ap-forgot a:hover { text-decoration: underline; }

/* social login */
.ap-social { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.ap-social .item { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--ap-line); border-radius: 11px; text-decoration: none; color: var(--ap-ink); font-weight: 600; font-size: 14px; background: var(--ap-bg); transition: border-color .2s, transform .2s; }
.ap-social .item:hover { border-color: var(--kx); transform: translateY(-2px); }
.ap-social .item img { height: 18px; }
.ap-or { text-align: center; position: relative; color: var(--ap-soft); font-size: 13px; margin: 0 0 18px; }
.ap-or::before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--ap-line); }
.ap-or span { position: relative; background: var(--ap-bg); padding: 0 12px; }

.ap-foot { text-align: center; color: var(--ap-soft); font-size: 13px; margin: 22px 0 0!important; }
.ap-foot a { color: var(--kx); font-weight: 600; text-decoration: none; }
.ap-alert { background: rgba(229,68,53,.12); border: 1px solid rgba(229,68,53,.4); color: #e0463b; border-radius: 11px; padding: 12px 16px; font-size: 14px; margin-bottom: 18px; }
.ap-alert.success { background: rgba(34,160,107,.12); border-color: rgba(34,160,107,.4); color: #1f9d68; }
.ap-alert ul { margin: 0; padding-left: 18px; }
body.kx-auth-dark .ap-alert { color: #ff8a7c; }
.text-danger, .fs-12.text-danger { color: #e0463b !important; font-size: 12px; }
body.kx-auth-dark .text-danger { color: #ff8a7c !important; }

/* OTP (verify / 2fa) */
.ap-otp { display: flex; gap: 12px; justify-content: flex-start; margin: 6px 0 18px; }
.ap-otp input { width: 58px; height: 58px; text-align: center; font-size: 22px; font-weight: 700; border-radius: 12px; border: 1px solid var(--ap-line); background: var(--ap-field); color: var(--ap-ink); outline: none; }
.ap-otp input:focus { border-color: var(--kx); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kx) 14%, transparent); }
.ap-muted { color: var(--ap-soft); font-size: 13px; }
.ap-muted a, .ap-resend { color: var(--kx); font-weight: 600; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; }

/* login-help table (optional) */
.login-info-table .table { color: var(--ap-soft); border-color: var(--ap-line) !important; font-size: 13px; }
.login-info-table .table td { border-color: var(--ap-line) !important; }
.login-info { cursor: pointer; }
.login-info:hover { color: var(--kx); }

@media (max-width: 860px) {
    /* Stack into a single column: the decorative brand panel collapses into a
       slim branded top bar (logo only) so it never piles on top of the form. */
    .ap-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
    .ap-left {
        padding: 14px 20px;
        min-height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    /* Hide the marketing copy / perks / back-link on mobile — keep only the logo. */
    .ap-left h1,
    .ap-left p,
    .ap-left .mt-4,
    .ap-left ul,
    .ap-left .ap-perk,
    .ap-left .ap-back { display: none !important; }
    .ap-left > div { width: auto; margin: 0; }
    .ap-left .brand { margin: 0 !important; display: inline-block; }
    .ap-left .brand img { max-height: 32px; }
    .ap-left .brand span { font-size: 20px; }
    .ap-right { padding: 30px 20px 44px; align-items: flex-start; }
    #kxAuthToggle { right: 16px; bottom: 16px; }
}
/* Very small screens: tighten the form padding + steps */
@media (max-width: 480px) {
    .ap-right { padding: 24px 16px 36px; }
    .ap-card { max-width: 100%; }
    .ap-steps .st { font-size: 12px; min-width: 92px; }
    .ap-otp input { width: 46px; height: 46px; font-size: 18px; }
}

.mb-3 {
    margin-bottom: 1.3rem !important;
}