/* ==========================================================================
   JB theme — standalone login / sign-up / forgot-password page.
   Same tokens as jb-theme.css; layout follows the reference account landing.
   ========================================================================== */

:root{
  --jb-p300:#ffae5b; --jb-p500:#ff8a14;
  --jb-n100:#ffffff; --jb-n200:#e2e6e9; --jb-n300:#8d9aa5; --jb-n400:#657381; --jb-n500:#576775;
  --jb-n600:#454745; --jb-n700:#303232; --jb-n800:#222424; --jb-n900:#141515; --jb-n1000:#000000;
  --jb-danger:#e20000; --jb-success:#38ba9d;
  --jb-line:rgba(255,255,255,.15);
  --jb-gap:8px; --jb-radius:3px;
  --jb-fs-normal:12px; --jb-fs-larger:14px; --jb-fs-h3:20px;
  --jb-header-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--jb-n900)}
body{
  color:var(--jb-n200);font-family:Poppins,'Hind Siliguri','Helvetica Neue',Helvetica,Tahoma,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit}

/* Layout: header + scrollable body */
.jb-auth{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.jb-auth__header{
  flex:none;display:flex;align-items:center;height:var(--jb-header-h);
  padding-inline-start:calc(var(--jb-gap) * 2);
  background:var(--jb-n900);border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:5;
}
.jb-auth__logo{display:flex;align-items:center;height:100%}
.jb-auth__logo img{height:48px;width:auto;display:block;transition:opacity .3s}
.jb-auth__logo:hover img{opacity:.7}
.jb-auth__home{
  margin-inline-start:auto;display:flex;align-items:center;justify-content:center;
  width:var(--jb-header-h);height:var(--jb-header-h);color:var(--jb-n200);font-size:19px;transition:opacity .3s;
}
.jb-auth__home:hover{opacity:.7}

.jb-auth__body{flex:1;position:relative;overflow:hidden}
.jb-auth__splash{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(60% 70% at 30% 40%,rgba(255,138,20,.28) 0%,transparent 70%),
  radial-gradient(50% 60% at 85% 90%,rgba(255,138,20,.12) 0%,transparent 70%),
  var(--jb-n900)}
.jb-auth__splash-art{position:absolute;left:4%;top:0;height:100%;aspect-ratio:1080/1920}
.jb-auth__splash-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.jb-auth__splash-art:after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--jb-n900) 0%,transparent 14%,transparent 60%,var(--jb-n900) 100%),
  linear-gradient(0deg,var(--jb-n900) 0%,transparent 30%)}
.jb-auth__scroll{position:relative;z-index:1;height:100%;overflow:auto;padding:0 20px;-webkit-overflow-scrolling:touch}
.jb-auth__inner{max-width:1200px;margin:80px auto 0;display:flex;justify-content:flex-end}
.jb-auth__main{width:100%;max-width:500px;padding-bottom:50px}

/* Tab navigation (Log in | Sign up) */
.jb-tabs__head{display:flex;position:relative;height:44px;border-bottom:1px solid var(--jb-line)}
.jb-tabs__btn{
  flex:1;display:flex;align-items:center;justify-content:center;height:100%;
  font-size:var(--jb-fs-larger);color:var(--jb-n300);background:none;border:0;cursor:pointer;transition:opacity .3s;
}
.jb-tabs__btn:hover{opacity:.7}
.jb-tabs__btn--active{color:var(--jb-n200);font-weight:600}
.jb-tabs__line{position:absolute;left:0;bottom:-1px;width:50%;height:3px;background:var(--jb-p500);transition:transform .3s}
.jb-tabs[data-tab="register"] .jb-tabs__line{transform:translateX(100%)}
.jb-tabs[data-tab="forgot"] .jb-tabs__head{display:none}

/* Panels */
.authx-panel{display:none;animation:jbAuthFade .6s both}
.authx-panel.active{display:block}
@keyframes jbAuthFade{from{opacity:0}to{opacity:1}}
.jb-panel{padding:calc(var(--jb-gap) * 2)}

/* Page title (forgot password / register step) */
.jb-title{display:flex;align-items:center;min-height:50px;padding:8px 0;gap:8px}
.jb-title__back{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--jb-n200);font-size:16px;border-radius:var(--jb-radius);background:none;border:0;cursor:pointer}
.jb-title__back:hover{opacity:.7}
.jb-title__text{font-size:var(--jb-fs-h3);font-weight:600;color:var(--jb-n200);line-height:1.3}

/* Form */
.jb-row + .jb-row{margin-top:16px}
.jb-form-wrap__title{display:flex;flex-wrap:wrap;align-items:center;line-height:1.5em;font-size:var(--jb-fs-larger);color:var(--jb-n300)}
.jb-form-wrap__title + .jb-form-wrap__content{margin-top:var(--jb-gap)}
.jb-input{
  position:relative;display:flex;align-items:center;height:50px;border-radius:var(--jb-radius);
  background:var(--jb-n800);border:1px solid transparent;transition:border-color .3s;overflow:hidden;
}
.jb-input:focus-within{border-color:var(--jb-p500)}
.jb-input input,.jb-input select{
  flex:1;min-width:0;height:100%;padding:0 16px;border:0;outline:0;background:transparent;
  color:var(--jb-n200);font-size:var(--jb-fs-larger);
}
.jb-input input::placeholder{color:var(--jb-n400);letter-spacing:normal}
.jb-input input:-webkit-autofill{-webkit-text-fill-color:var(--jb-n200);-webkit-box-shadow:0 0 0 40px var(--jb-n800) inset}
.jb-input select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-left:44px}
.jb-input select option{background:var(--jb-n800);color:var(--jb-n200)}
.jb-input__flag{position:absolute;left:16px;width:20px;height:20px;border-radius:50%;object-fit:cover;pointer-events:none}
.jb-input__arrow{position:absolute;right:16px;color:var(--jb-n200);font-size:12px;pointer-events:none}
.jb-input__eye{
  flex:none;width:48px;height:100%;border:0;background:none;color:var(--jb-n300);font-size:15px;cursor:pointer;
}
.jb-input__eye:hover{color:var(--jb-n200)}

.jb-phone{display:grid;grid-template-columns:1fr 2fr;column-gap:var(--jb-gap)}
.jb-phone__code{display:flex;align-items:center;gap:var(--jb-gap);padding:0 16px;color:var(--jb-n200);font-size:var(--jb-fs-larger)}
.jb-phone__code img{width:20px;height:20px;border-radius:50%;object-fit:cover}

.jb-otp{display:grid;grid-template-columns:1fr auto auto;gap:var(--jb-gap)}
.jb-otp .jb-input input{letter-spacing:.2em}

/* Messages */
.authx-msg{min-height:0;font-size:var(--jb-fs-normal);line-height:1.4;margin-top:var(--jb-gap)}
.authx-msg:empty{display:none}
.authx-msg.err{color:var(--jb-danger)}
.authx-msg.ok{color:var(--jb-success)}
.authx-msg.err:before{content:"\f06a";font-family:"Font Awesome 6 Free";font-weight:900;margin-right:6px}

/* Links / checks */
.jb-link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:calc(var(--jb-gap) * 2)}
.jb-link{display:inline-block;line-height:1.5;font-size:var(--jb-fs-larger);color:var(--jb-p300);text-decoration:underline;cursor:pointer;background:none;border:0}
.jb-link:hover{opacity:.7}
.jb-check{display:flex;align-items:flex-start;gap:10px;font-size:var(--jb-fs-normal);line-height:1.5;color:var(--jb-n300);cursor:pointer}
.jb-check input{position:absolute;opacity:0;width:0;height:0}
.jb-check__box{
  flex:none;width:18px;height:18px;margin-top:1px;border-radius:var(--jb-radius);background:var(--jb-n600);
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.jb-check__box:after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:11px;color:#fff;opacity:0}
.jb-check input:checked + .jb-check__box{background:var(--jb-p500)}
.jb-check input:checked + .jb-check__box:after{opacity:1}
.jb-check + .jb-check{margin-top:12px}
.jb-checks{margin-top:calc(var(--jb-gap) * 2)}

/* Buttons */
.jb-btn-wrap{display:flex;flex-direction:column;gap:calc(var(--jb-gap) * 2);margin-top:calc(var(--jb-gap) * 2)}
.jb-btn{
  display:flex;align-items:center;justify-content:center;width:100%;height:50px;padding:0 10px;
  border:0;border-radius:var(--jb-radius);font-size:var(--jb-fs-larger);font-weight:500;cursor:pointer;transition:background .3s,opacity .3s;
}
.jb-btn--primary{background:var(--jb-p500);color:var(--jb-n100)}
.jb-btn--primary:hover{background:color-mix(in srgb,var(--jb-p500),black 40%)}
.jb-btn--primary:disabled{background:color-mix(in srgb,var(--jb-p500),black 40%);color:var(--jb-n200);cursor:not-allowed}
.jb-btn--tertiary{background:transparent;color:var(--jb-n200);border:1px solid var(--jb-n600)}
.jb-btn--tertiary:hover{opacity:.7}
.jb-btn--sm{width:auto;min-width:84px;padding:0 14px;white-space:nowrap}
.jb-btn--plain{height:auto;background:none;color:var(--jb-p300);text-decoration:underline;padding:4px}

/* Login OTP step */
.authx-otp-panel{display:none;margin-top:var(--jb-gap)}
.jb-otp-panel__title{font-size:16px;font-weight:600;color:var(--jb-n200);margin-bottom:6px}
.jb-otp-panel__desc{font-size:var(--jb-fs-larger);color:var(--jb-n300);line-height:1.5;margin-bottom:16px}

/* Register stepper */
.jb-stepper{--step:50px;margin:calc(var(--jb-gap) * 2) 0;overflow-x:auto;text-align:center}
.jb-stepper__ul{display:inline-flex;align-items:flex-start;min-width:360px;list-style:none;-webkit-user-select:none;user-select:none}
.jb-step{width:var(--step);flex:none;color:var(--jb-n300);transition:color .5s}
.jb-step__circle{position:relative;border-radius:50%;background:var(--jb-n700);transition:background-color .5s}
.jb-step__circle:before{content:"";display:block;padding-bottom:100%}
.jb-step__inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--jb-n100)}
.jb-step__title{display:flex;justify-content:center;margin-top:var(--jb-gap);font-size:var(--jb-fs-larger);white-space:nowrap}
.jb-step--done{color:var(--jb-p500)}
.jb-step--done .jb-step__circle{background:var(--jb-p500)}
.jb-step--done.jb-step--past{cursor:pointer}
.jb-stepper__link{flex:1;min-width:var(--step);height:2px;margin-top:calc(var(--step) * .5);background:var(--jb-n700);transition:background-color .5s}
.jb-stepper__link--done{background:var(--jb-p500)}
.jb-reg-step{display:none}
.jb-reg-step--active{display:block;animation:jbAuthFade .5s both}

/* Mobile: banner on top, form below */
@media (max-width:780px){
  .jb-auth__body{overflow:auto}
  .jb-auth__splash{position:relative;inset:auto;height:220px}
  .jb-auth__splash-art{left:0;right:0;width:100%;height:auto;aspect-ratio:auto;top:0;bottom:0}
  .jb-auth__splash-art img{object-position:center 4%}
  .jb-auth__splash-art:after{background:linear-gradient(0deg,var(--jb-n900) 0%,transparent 45%)}
  .jb-auth__scroll{height:auto;overflow:visible;padding:0}
  .jb-auth__inner{margin:0;display:block}
  .jb-auth__main{background:var(--jb-n900)}
  .jb-stepper__ul{min-width:0;width:100%}
  .jb-auth__main{max-width:none;padding-bottom:32px}
  .jb-auth__logo img{height:40px}
  .jb-otp{grid-template-columns:1fr 1fr}
  .jb-otp .jb-input{grid-column:1 / -1}
}