/* =====================================================================
   SkillSetGo Academy - one brand look for the whole website.
   Loaded LAST on every public / student / account page.
   Lockup:  [SG]  SKILLSET + GO(blue)  /  ACADEMY   (same as the admin login)
   ===================================================================== */

/* ---------- brand lockup ---------- */
.sg-brand{display:inline-flex;align-items:center;gap:10px;color:#071735;text-decoration:none;line-height:1;flex:none}
.sg-brand-icon{flex:none;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#143b9c,#13c6ff);color:#fff;font:800 16px 'Sora','DM Sans',Arial,sans-serif;
  box-shadow:0 6px 18px rgba(8,102,255,.4);transition:transform .4s}
.sg-brand:hover .sg-brand-icon{transform:rotate(-8deg) scale(1.06)}
.sg-brand-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.sg-brand-name{display:block;margin:0;font:800 18px/1 'Sora','DM Sans',Arial,sans-serif;letter-spacing:.3px;color:#071735;white-space:nowrap}
.sg-brand-name span{color:#0866ff}
.sg-brand .sg-brand-sub{display:block;margin:0;font:700 8px/1 'DM Sans',Arial,sans-serif;letter-spacing:3px;color:#071735}
/* sizes */
.sg-brand.lg .sg-brand-icon{width:48px;height:48px;border-radius:14px}
.sg-brand.lg .sg-brand-name{font-size:21px}
.sg-brand.sm .sg-brand-icon{width:36px;height:36px;border-radius:11px;font-size:14px}
.sg-brand.sm .sg-brand-name{font-size:15px}
/* on dark backgrounds (footer, learn / dashboard top bars) */
.sg-brand.on-dark .sg-brand-name{color:#fff}
.sg-brand.on-dark .sg-brand-name span{color:#4db8ff}
.sg-brand.on-dark .sg-brand-sub{color:#cfe0ff}
/* logged-in student name shown under the lockup on phones (home page) */
.sg-brand #studentNameHeader{margin-top:0}
@media(max-width:480px){
  .sg-brand-icon{width:38px;height:38px;border-radius:11px;font-size:14px}
  .sg-brand-name{font-size:15px}
  .sg-brand.lg .sg-brand-name{font-size:18px}
}

/* ===== student login / register = admin login: same card, type, fields, button and links ===== */
body.pro-auth .login-card,body.pro-auth .register-card,body.pro-auth .form-group input,body.pro-auth .form-group select,body.pro-auth .login-btn,body.pro-auth .register-btn{box-sizing:border-box}
body.pro-auth .login-container,body.pro-auth .register-container{padding:24px}
body.pro-auth .login-card,body.pro-auth .register-card{background:#fff;width:100%;max-width:420px;padding:40px;border:0}
body.pro-auth .login-card h1,body.pro-auth .register-card h1{margin:0;font-size:30px;line-height:1.15;text-align:center}
body.pro-auth .login-card .subtitle,body.pro-auth .register-card .subtitle{margin:8px 0 30px;font-size:14px;color:#6a758d;text-align:center}
body.pro-auth .form-group{margin-bottom:20px}
body.pro-auth .form-group label{display:block;margin-bottom:7px;font-size:14px;font-weight:700;color:#10204b}
body.pro-auth .form-group input,body.pro-auth .form-group select{width:100%;height:44px;padding:13px 14px;font-size:14px}
body.pro-auth .captcha-box{margin-bottom:10px}
body.pro-auth .login-btn,body.pro-auth .register-btn{width:100%;padding:14px;font-size:15px;font-weight:700;margin-top:0}
body.pro-auth .login-card .register-link,body.pro-auth .register-card .login-link{margin-top:14px;text-align:center;font-size:14px;color:#10204b}
body.pro-auth .login-card .register-link a,body.pro-auth .register-card .login-link a{font-weight:700;text-decoration:none}
body.pro-auth .back-home{margin-top:25px;text-align:center}
body.pro-auth .back-home a{display:block;color:#0866ff;font-size:13px;font-weight:700;text-decoration:none}
/* fields and buttons use the site font (browsers default them to Arial) - admin login too */
body.pro-auth input,body.pro-auth select,body.pro-auth button,body.pro-admin-login input,body.pro-admin-login button{font-family:'DM Sans',Arial,sans-serif}
@media(max-width:480px){body.pro-auth .login-card,body.pro-auth .register-card{padding:30px 22px}}

/* (kept) solid white card */
body.pro-auth .login-card,body.pro-auth .register-card{background:#fff}

/* login / register cards: the lockup sits centred above the title (same as admin login) */
.sg-brand-wrap{display:flex;justify-content:center;margin:0 0 30px}

/* ---------- top bar + footer for the plain pages (policies, contact, pricing) ---------- */
.sg-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
  padding:12px 5%;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #e5eaf2}
.sg-topbar nav{display:flex;align-items:center;gap:6px 24px;flex-wrap:wrap}
.sg-topbar nav a{color:#1b2c57;font-weight:600;font-size:14px;text-decoration:none;margin:0;transition:color .2s}
.sg-topbar nav a:hover{color:#0866ff}
.sg-topbar nav a.sg-top-btn{padding:9px 18px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#0866ff,#12c8ff);box-shadow:0 8px 20px rgba(8,102,255,.3)}
.sg-topbar nav a.sg-top-btn:hover{color:#fff;transform:translateY(-1px)}
.sg-footer{margin-top:40px;padding:44px 5% 32px;text-align:center;color:#cfe0ff;background:#060d24;font-size:14px}
.sg-footer .sg-brand{margin:0 auto}
.sg-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:22px 0 18px}
.sg-footer nav a{color:#cfe0ff;text-decoration:none;margin:0;transition:color .2s}
.sg-footer nav a:hover{color:#12c8ff}
.sg-footer p{margin:0;color:#9fb6e6;font-size:13px}

@media(max-width:600px){
  .sg-topbar{padding:10px 4%;gap:8px}
  .sg-topbar nav{width:100%;flex-wrap:nowrap;overflow-x:auto;gap:18px;padding-bottom:2px;scrollbar-width:none}
  .sg-topbar nav::-webkit-scrollbar{display:none}
  .sg-topbar nav a{white-space:nowrap}
  .sg-topbar nav a.sg-top-btn{padding:7px 14px}
}

/* ---------- small account pages (forgot / reset / change password): same dark look as the login pages ---------- */
body.acc-body{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 0,#12306f,#060d24 60%)}
body.acc-body::before,body.acc-body::after{content:"";position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none}
body.acc-body::before{width:420px;height:420px;background:#0866ff;opacity:.5;top:-120px;left:-100px;animation:sgdrift 14s ease-in-out infinite alternate}
body.acc-body::after{width:360px;height:360px;background:#12c8ff;opacity:.4;bottom:-120px;right:-80px;animation:sgdrift 12s -5s ease-in-out infinite alternate}
@keyframes sgdrift{to{transform:translate(70px,50px)}}
.acc-card{position:relative;z-index:2;overflow:hidden;border-radius:26px;border-color:rgba(255,255,255,.5);box-shadow:0 40px 90px rgba(0,0,0,.45)}
.acc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#0866ff,#12c8ff,#ffb020,#0866ff)}
.acc-card>.sg-brand{display:flex;justify-content:center;margin:6px 0 24px}
.acc-card h1,.acc-card .acc-sub{text-align:center}
.acc-card .acc-actions a{height:auto;min-height:48px;padding:12px 14px;text-align:center;overflow-wrap:anywhere}

/* pay page + learn page top bar */
.pay-brand{margin:0 0 18px}
@media(max-width:1000px){.ln-top .sg-brand-text{display:none}}

/* ---------- every page: same font stack ---------- */
body{font-family:'DM Sans',Arial,sans-serif}
h1,h2,h3{font-family:'Sora','DM Sans',Arial,sans-serif}
@media(prefers-reduced-motion:reduce){body.acc-body::before,body.acc-body::after{animation:none}}