/**
 * KeepSeal Login — front-end styles.
 * Neo-industrial design language: navy + induction-heat accent, seal motifs,
 * RTL-first, light/dark. Four styles (minimal, soft, split, stamp) × three
 * contexts (inline, modal, fullpage).
 */

.ksl{
	--navy:#10326a; --navy-2:#164089; --navy-deep:#0c1c38; --heat:#ff5a1f; --heat-2:#e0400a; --red:#c00000;
	--page-bg:#eef1f7; --surface:#ffffff; --surface-2:#f5f7fb; --ink:#0f1f3d; --muted:#65728c; --line:#e2e7f0;
	--field:#f7f9fc; --radius:14px; --success:#1a8f5a; --error:#d43a3a;
	--font:"Vazirmatn","IRANSans","Segoe UI",Tahoma,system-ui,sans-serif;
	direction:rtl; font-family:var(--font); color:var(--ink); box-sizing:border-box;
}
.ksl *,.ksl *::before,.ksl *::after{box-sizing:border-box}

.ksl--theme-dark{
	--page-bg:#0a0d13; --surface:#141922; --surface-2:#1b212c; --ink:#e9eef7; --muted:#96a2b6; --line:#252d3b; --field:#1b212c;
}
@media (prefers-color-scheme:dark){
	.ksl--theme-auto{
		--page-bg:#0a0d13; --surface:#141922; --surface-2:#1b212c; --ink:#e9eef7; --muted:#96a2b6; --line:#252d3b; --field:#1b212c;
	}
}
body.ksn-dark .ksl--theme-auto,body.ksn-mode-dark .ksl--theme-auto{
	--page-bg:#0a0d13; --surface:#141922; --surface-2:#1b212c; --ink:#e9eef7; --muted:#96a2b6; --line:#252d3b; --field:#1b212c;
}

/* ---------------- induction ring mark ---------------- */
.ksl-mark{position:relative;width:42px;height:42px;flex:none;display:inline-block}
.ksl-mark i{position:absolute;inset:0;margin:auto;border-radius:50%;border:1.5px solid var(--navy);opacity:.5}
.ksl-mark i.b{width:64%;height:64%;opacity:.8;border-color:var(--navy-2)}
.ksl-mark i.c{width:30%;height:30%;border:0;background:var(--heat);opacity:1;box-shadow:0 0 10px rgba(255,90,31,.5)}
.ksl--theme-dark .ksl-mark i,body.ksn-dark .ksl--theme-auto .ksl-mark i{border-color:#5b82c9}

/* ---------------- panel + card base ---------------- */
.ksl-panel{width:100%;max-width:410px;margin:0 auto}
.ksl-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:36px 32px;overflow:hidden}

.ksl-brandline{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.ksl-wm{font-weight:800;font-size:16px;letter-spacing:-.2px;line-height:1.2}
.ksl-wm small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:0;margin-top:2px}

.ksl-title{font-size:21px;font-weight:800;margin:0 0 6px;letter-spacing:-.3px}
.ksl-sub{color:var(--muted);font-size:13px;margin:0 0 20px;line-height:1.8}
.ksl-label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:0 0 7px}

/* ---------------- inputs ---------------- */
.ksl-field{position:relative;display:flex;align-items:center}
.ksl-pfx{position:absolute;inset-inline-start:14px;color:var(--muted);font-size:13px;direction:ltr;font-weight:700;pointer-events:none}
.ksl-input{width:100%;height:50px;padding:0 15px;font-size:15px;font-family:var(--font);color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:var(--radius);outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.ksl-mobile{padding-inline-start:50px;direction:ltr;text-align:left;letter-spacing:1.5px;font-weight:700}
.ksl-input:focus{border-color:var(--navy);background:var(--surface);box-shadow:0 0 0 3px rgba(16,50,106,.13)}
.ksl--theme-dark .ksl-input:focus,body.ksn-dark .ksl--theme-auto .ksl-input:focus{border-color:#5b82c9;box-shadow:0 0 0 3px rgba(91,130,201,.2)}
.ksl-input.ksl-invalid{border-color:var(--error)}

/* ---------------- buttons ---------------- */
.ksl-btn{position:relative;width:100%;height:50px;margin-top:20px;border:0;border-radius:var(--radius);cursor:pointer;font-family:var(--font);font-size:15px;font-weight:800;color:#fff;background:var(--navy);transition:background .18s,transform .1s,box-shadow .2s;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none}
.ksl-btn:hover{background:var(--navy-2)}
.ksl-btn:active{transform:translateY(1px)}
.ksl-btn:disabled{opacity:.7;cursor:not-allowed}
.ksl-btn--ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.ksl-btn--ghost:hover{background:var(--surface-2);color:var(--navy)}
.ksl--theme-dark .ksl-btn--ghost,body.ksn-dark .ksl--theme-auto .ksl-btn--ghost{color:#7ea6ec}
.ksl-trigger{margin-top:0}

.ksl-spin{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:none;animation:ksl-spin .7s linear infinite}
.ksl-btn.is-busy .ksl-spin{display:inline-block}
.ksl-btn.is-busy .ksl-btn__label{opacity:.85}
@keyframes ksl-spin{to{transform:rotate(360deg)}}

.ksl-fine{margin-top:14px;font-size:11px;color:var(--muted);text-align:center;line-height:1.9}

/* ---------------- step 2 ---------------- */
.ksl-step{display:none}
.ksl-step.is-active{display:block;animation:ksl-in .32s cubic-bezier(.22,1,.36,1)}
@keyframes ksl-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ksl-step.is-active{animation:none}}

.ksl-sent{font-size:12.5px;color:var(--muted);text-align:center;margin:0 0 18px;line-height:2}
.ksl-sent__num{font-weight:800;color:var(--ink);display:inline-block;margin:0 4px}
.ksl-edit{color:var(--heat);background:none;border:0;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer}

.ksl-otp{display:flex;gap:9px;justify-content:center;direction:ltr;margin-bottom:6px}
.ksl-otp-box{width:48px;height:56px;text-align:center;font-size:22px;font-weight:800;color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:var(--radius);outline:none;transition:border-color .18s,box-shadow .18s,transform .1s}
.ksl-otp-box:focus{border-color:var(--heat);box-shadow:0 0 0 3px rgba(255,90,31,.16);transform:translateY(-2px)}
.ksl-otp-box.is-filled{border-color:var(--navy);background:var(--surface)}

.ksl-register{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ksl-register:empty{display:none}
.ksl-register__head{grid-column:1/-1;font-size:12.5px;color:var(--heat);font-weight:700;margin:0 0 2px;display:flex;align-items:center;gap:7px}
.ksl-register .ksl-field{grid-column:auto;flex-direction:column;align-items:stretch}
.ksl-register .ksl-field--full{grid-column:1/-1}

.ksl-resend-row{text-align:center;margin-top:14px}
.ksl-resend{background:none;border:0;color:var(--navy);font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer}
.ksl-resend:disabled{color:var(--muted);cursor:default;font-weight:500}
.ksl--theme-dark .ksl-resend,body.ksn-dark .ksl--theme-auto .ksl-resend{color:#7ea6ec}

/* ---------------- captcha ---------------- */
.ksl-captcha:empty{display:none}
.ksl-captcha{margin-top:14px}
.ksl-captcha__row{display:flex;align-items:center;gap:8px}
.ksl-captcha__q{flex:0 0 auto;min-width:84px;padding:12px;font-weight:800;direction:ltr;text-align:center;background:var(--field);border:1.5px solid var(--line);border-radius:10px}
.ksl-captcha__answer{flex:1}
.ksl-captcha__refresh{flex:0 0 auto;width:44px;height:44px;font-size:18px;color:var(--muted);background:var(--field);border:1.5px solid var(--line);border-radius:10px;cursor:pointer;transition:color .2s,transform .3s}
.ksl-captcha__refresh:hover{color:var(--heat);transform:rotate(180deg)}

/* ---------------- message ---------------- */
.ksl-message{margin-top:14px;font-size:12.5px;text-align:center;min-height:16px}
.ksl-message.is-error{color:var(--error)}
.ksl-message.is-success{color:var(--success)}

/* ---------------- logged-in ---------------- */
.ksl--loggedin .ksl-card{text-align:center}
.ksl-avatar{width:56px;height:56px;margin:0 auto 12px;display:grid;place-items:center;font-size:24px;font-weight:800;color:#fff;background:var(--navy);border-radius:50%}
.ksl-hello{margin:0 0 16px;font-size:15px}

/* ================================================================
 * CONTEXTS
 * ================================================================ */

/* inline: card sits in normal flow */
.ksl--inline .ksl-backdrop{display:block}

/* modal: hidden until opened */
.ksl--modal .ksl-backdrop{display:none;position:fixed;inset:0;z-index:99999;background:rgba(9,14,26,.55);backdrop-filter:blur(5px);padding:20px;overflow:auto}
.ksl--modal.is-open .ksl-backdrop{display:flex;align-items:center;justify-content:center;animation:ksl-fade .25s ease}
.ksl--modal.is-open .ksl-panel{animation:ksl-pop .3s cubic-bezier(.22,1,.36,1)}
@keyframes ksl-fade{from{opacity:0}to{opacity:1}}
@keyframes ksl-pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.ksl--modal .ksl-card{box-shadow:0 30px 80px -30px rgba(9,14,26,.6)}
body.ksl-noscroll{overflow:hidden}

.ksl-close{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:4;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:19px;line-height:1;cursor:pointer;transition:color .2s}
.ksl-close:hover{color:var(--error)}

/* fullpage: immersive full-screen scene */
.ksl-fullpage-body{margin:0;background:var(--page-bg)}
.ksl--fullpage{min-height:100vh}
.ksl--fullpage .ksl-backdrop{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(70% 55% at 50% 0%,rgba(16,50,106,.10),transparent 60%),var(--page-bg)}

/* ================================================================
 * STYLES
 * ================================================================ */

/* A · minimal — already the base card. */

/* B · soft — no border, soft shadow, faint ring watermark */
.ksl--style-soft .ksl-card{border:0;border-radius:22px;box-shadow:0 24px 60px -28px rgba(16,50,106,.4)}
.ksl--style-soft.ksl--theme-dark .ksl-card,body.ksn-dark .ksl--style-soft.ksl--theme-auto .ksl-card{box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.ksl--style-soft .ksl-card::before{content:"";position:absolute;inset-block-start:-90px;inset-inline-start:-90px;width:210px;height:210px;border-radius:50%;border:32px solid rgba(16,50,106,.05);box-shadow:inset 0 0 0 22px rgba(255,90,31,.05);pointer-events:none}
.ksl--style-soft .ksl-backdrop{background:radial-gradient(70% 55% at 50% 0%,rgba(16,50,106,.10),transparent 60%),var(--page-bg)}

/* C · split — flat two-column brand + form */
.ksl--style-split .ksl-panel{max-width:840px;display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.ksl--style-split .ksl-card{border:0;border-radius:0}
.ksl-brand{background:var(--navy-deep);color:#eaf1ff;padding:40px 34px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.ksl--theme-dark .ksl-brand,body.ksn-dark .ksl--theme-auto .ksl-brand{background:#0a1428}
.ksl-brand .ksl-mark i{border-color:rgba(150,185,255,.55)}
.ksl-brand__logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px}
.ksl-brand__body h1{font-size:26px;font-weight:800;line-height:1.4;margin:0 0 12px;letter-spacing:-.4px}
.ksl-brand__body h1 span{color:var(--heat)}
.ksl-brand__body p{color:#a9bbdd;font-size:13.5px;line-height:1.9;margin:0;max-width:32ch}
.ksl-brand__foot{font-size:12px;color:#8fa3c8}
.ksl--fullpage.ksl--style-split .ksl-panel{max-width:none;min-height:100vh;border-radius:0;border:0}
.ksl--fullpage.ksl--style-split .ksl-backdrop{padding:0;place-items:stretch;background:var(--surface)}
.ksl--fullpage.ksl--style-split .ksl-card{display:flex;flex-direction:column;justify-content:center;max-width:440px;margin:0 auto;width:100%;padding:44px 38px}
@media (max-width:820px){
	.ksl--style-split .ksl-panel{grid-template-columns:1fr}
	.ksl-brand{display:none}
	.ksl--fullpage.ksl--style-split .ksl-backdrop{place-items:center;padding:28px}
}

/* D · stamp — single slanted heat corner + heat button */
.ksl--style-stamp .ksl-card{border-radius:16px}
.ksl--style-stamp .ksl-card::before{content:"";position:absolute;inset-block-start:0;inset-inline-end:0;width:120px;height:120px;background:linear-gradient(135deg,var(--heat),var(--heat-2));clip-path:polygon(100% 0,0 0,100% 100%);opacity:.14;pointer-events:none}
.ksl-seal{position:absolute;inset-block-start:15px;inset-inline-end:15px;width:20px;height:20px;border-radius:50%;border:2px solid var(--heat);z-index:2}
.ksl-seal::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--heat)}
.ksl--style-stamp .ksl-send,.ksl--style-stamp .ksl-verify{background:var(--heat)}
.ksl--style-stamp .ksl-send:hover,.ksl--style-stamp .ksl-verify:hover{background:var(--heat-2)}