/* ═══ VROOL AUTH — Premium Split-Screen v2 ═══ */

/* Hide EVERYTHING except the form */
#body-user-register header,#user-login header,
#body-user-register footer,#user-login footer,
#body-user-register .vrool-footer,#body-user-register .vrool-footer-card,#body-user-register .footer-wrap,#body-user-register #footer,
#user-login .vrool-footer,#user-login .vrool-footer-card,#user-login .footer-wrap,#user-login #footer,
#body-user-register .vrool-gsearch-bar,#body-user-register #vroolGSearchBar,
#user-login .vrool-gsearch-bar,#user-login #vroolGSearchBar,
#body-user-register [class*="ad-bar"],#body-user-register [class*="sticky-sell"],#body-user-register #vrool-ad-sticky,
#user-login [class*="ad-bar"],#user-login [class*="sticky-sell"],#user-login #vrool-ad-sticky,
#body-user-register #side-menu,#user-login #side-menu,
#body-user-register #menu-cover,#user-login #menu-cover{display:none !important;}

/* Full viewport */
#body-user-register,#user-login{margin:0 !important;padding:0 !important;padding-top:0 !important;overflow:visible !important;background:#ffffff !important;min-height:0 !important;height:auto !important;}

/* Grid layout */
#body-user-register .content,#user-login .content{max-width:100% !important;padding:0 !important;margin:0 !important;}
#body-user-register section.container,
#user-login section.container{
  max-width:100% !important;padding:0 !important;
  display:grid;grid-template-columns:1.3fr 1fr;
  min-height:100vh;position:relative;
}

/* Left panel — green gradient with branding */
#body-user-register section.container::before,
#user-login section.container::before{
  content:'';display:block;grid-column:1;grid-row:1;
  background:linear-gradient(160deg,#895bae 0%,#9e69c9 50%,#c07ff5 100%);
  position:sticky;top:0;height:100vh;
  border-top-right-radius:40px;border-bottom-right-radius:40px;
}
#body-user-register section.container::after,
#user-login section.container::after{
  content:'';
  position:fixed;left:0;top:0;width:50%;height:100vh;
  pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 20% 50%, rgba(158,105,201,0.2) 0%, transparent 60%),
             radial-gradient(ellipse at 80% 20%, rgba(124,58,237,0.25) 0%, transparent 50%);
  border-top-right-radius:40px;border-bottom-right-radius:40px;
}

/* Right panel — form area */
#body-user-register section.container > .box,
#user-login section.container > .box{
  grid-column:2;grid-row:1;
  max-width:100%;width:100%;
  padding:60px 56px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;box-sizing:border-box;
  background:#fdf7ff;
}

/* Auth tabs */
.vrool-auth-tabs{display:flex;align-items:center;gap:0;background:#f3f4f6;padding:5px;border-radius:16px;margin:0 0 28px 0;border:1px solid #e5e7eb;box-shadow:none;}
.vrool-auth-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 20px;border-radius:12px;text-decoration:none;font-weight:700;font-size:14px;color:#6b7280;transition:all 0.2s;border:none;}
.vrool-auth-tab.is-active{background:#9e69c9;color:#fff;box-shadow:0 4px 14px rgba(158,105,201,0.25);border:none;border-radius:12px;}
.vrool-auth-tab:not(.is-active):hover{color:#0f172a;}
.vrool-auth-tab:not(.is-active){border:1px solid transparent;}

/* Social buttons */
#body-user-register .social,#user-login .social{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;}
#body-user-register .social a,#user-login .social a{display:grid;grid-template-columns:40px 1fr 20px;align-items:center;gap:12px;height:62px;border-radius:16px;font-size:15px;font-weight:600;text-decoration:none;transition:all 0.15s;border:1.5px solid #e5e7eb;background:#fff;color:#0f172a;padding:0 20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
#body-user-register .social a:hover,#user-login .social a:hover{border-color:#cbd5e1;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
#body-user-register .social a::after,#user-login .social a::after{content:"›";font-size:22px;color:#9ca3af;font-weight:300;justify-self:end;}
#body-user-register .social a.facebook,#user-login .social a.facebook{color:#1877f2;border-color:rgba(24,119,242,0.3);}
#body-user-register .social a.facebook:hover,#user-login .social a.facebook:hover{border-color:#1877f2;}
#body-user-register .social a.apple,#user-login .social a.apple{background:#fff;color:#000;border-color:#e2e8f0;}
#body-user-register .social a.apple:hover,#user-login .social a.apple:hover{background:rgba(0,0,0,0.04);border-color:#cbd5e1;}
#body-user-register .social a i,#user-login .social a i{font-size:20px;justify-self:start;}
#body-user-register .social a span,#user-login .social a span{text-align:center;}

/* Or divider */
#body-user-register .social + div,#user-login .social + div{text-align:center;position:relative;margin:4px 0 20px;}
#body-user-register .social + div::before,#user-login .social + div::before{display:none;}

/* Email toggle */
#vrool-toggle-manual-register,#vrool-toggle-manual-login{display:inline-flex !important;align-items:center;gap:8px;font-size:14px !important;font-weight:600 !important;color:#895bae !important;padding:12px 28px !important;border-radius:12px !important;border:1.5px solid #895bae !important;background:transparent !important;transition:all 0.15s !important;}
#vrool-toggle-manual-register:hover,#vrool-toggle-manual-login:hover{background:rgba(158,105,201,0.06) !important;}

/* Form card */
.vrool-login-card{border:none !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;padding:10px 16px 0 16px !important;max-width:480px !important;margin:0 auto !important;box-sizing:border-box !important;overflow-y:auto !important;}

/* Inputs */
#body-user-register .row,#user-login .row{margin-bottom:16px;}
#body-user-register .row label,#user-login .row label{font-size:13px;font-weight:700;color:#334155;margin-bottom:7px;display:block;}
#body-user-register .input-box input,#body-user-register .input-box select,
#user-login .input-box input,#user-login .input-box select{height:50px !important;min-height:50px !important;border-radius:12px !important;border:1.5px solid #e2e8f0 !important;padding:0 16px !important;font-size:15px !important;transition:border-color 0.2s,box-shadow 0.2s !important;background:#fff !important;}
#body-user-register .input-box input:focus,#user-login .input-box input:focus{border-color:#9e69c9 !important;box-shadow:0 0 0 4px rgba(158,105,201,0.08) !important;outline:none !important;}

/* Submit button */
#body-user-register button.btn[type=submit],#user-login button.btn[type=submit]{width:100%;height:54px !important;border-radius:12px !important;background:#895bae !important;color:#fff !important;font-size:16px !important;font-weight:700 !important;border:none !important;cursor:pointer;transition:all 0.15s !important;box-shadow:none !important;margin-top:12px;}
#body-user-register button.btn[type=submit]:hover,#user-login button.btn[type=submit]:hover{background:#895bae !important;}

/* Forgot password */
.vrool-reset-link{color:#9e69c9 !important;font-weight:600 !important;font-size:13px !important;}

/* Mobile */
@media(max-width:900px){
  #body-user-register section.container::before,#user-login section.container::before,
  #body-user-register section.container::after,#user-login section.container::after{display:none !important;}
  #body-user-register section.container,#user-login section.container{display:block !important;min-height:auto;}
  #body-user-register section.container > .box,#user-login section.container > .box{padding:0 24px 100px 24px;max-width:480px;margin:0 auto;background:#fff;}
  #body-user-register,#user-login{background:#fff;}
}


/* Left branding panel content */
.vrool-auth-brand{
  grid-column:1;grid-row:1;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:60px;box-sizing:border-box;
  z-index:2;color:#fff;
  background:linear-gradient(160deg,#895bae 0%,#9e69c9 50%,#c07ff5 100%);
  border-top-right-radius:40px;border-bottom-right-radius:40px;
  overflow:hidden;
}
.vrool-auth-brand::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 80%, rgba(192,127,245,0.3) 0%, transparent 50%),
             radial-gradient(ellipse at 80% 20%, rgba(137,91,174,0.4) 0%, transparent 50%);
  pointer-events:none;
}
.vrool-auth-brand-logo{max-width:440px;margin-bottom:40px;position:relative;}
.vrool-auth-brand-title{font-size:clamp(40px,5vw,60px);font-weight:900;line-height:1.15;letter-spacing:-0.03em;margin:0 0 16px;position:relative;color:#fff;}
.vrool-auth-brand-title span{color:#fff;}
.vrool-auth-brand-sub{font-size:16px;color:rgba(255,255,255,0.75);line-height:1.5;margin:0 0 48px;position:relative;white-space:nowrap;}
.vrool-auth-brand-values{display:flex;gap:28px;position:relative;}
.vrool-auth-brand-values div{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,0.7);}
.vrool-auth-brand-values div span{font-size:32px;margin-bottom:0;}
.vrool-auth-brand-values div span img{filter:brightness(0) invert(1) !important;}
.vrool-auth-brand-values div strong{font-size:14px;font-weight:700;color:#fff;display:block;}

/* Hide pseudo-elements since we now have real content */
#body-user-register section.container::before,#user-login section.container::before,
#body-user-register section.container::after,#user-login section.container::after{display:none !important;}

/* Mobile: hide brand panel */
@media(max-width:900px){
  .vrool-auth-brand{display:none !important;}
}

/* Hide referral banner on auth pages */
#body-user-register .vrool-referral-banner,#user-login .vrool-referral-banner,
#body-user-register .user-reg-hook,#user-login .user-reg-hook{display:none !important;}