/* ============================================================
   STOCKSKILL.IN — PREMIUM CORPORATE MOBILE DRAWER
   Yellow #FFC107 / Navy #071E3A / Blue #0B2D5B
   ============================================================ */

.ss-mobile-overlay{
  position:fixed;
  inset:0;
  z-index:99990;
  background:rgba(3,14,25,.68);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}

.ss-mobile-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.ss-mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(88vw,420px);
  height:100dvh;
  z-index:100000;
  overflow-y:auto;
  overflow-x:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 90% 5%,rgba(17,82,155,.20),transparent 27%),
    radial-gradient(circle at 15% 45%,rgba(0,176,80,.05),transparent 25%),
    linear-gradient(180deg,#061b28 0%,#071e3a 55%,#06182d 100%);
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-24px 0 70px rgba(0,0,0,.40);
  transform:translateX(105%);
  transition:transform .34s cubic-bezier(.22,.75,.25,1);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,193,7,.35) transparent;
}

.ss-mobile-drawer.is-open{
  transform:translateX(0);
}

.ss-mobile-drawer::-webkit-scrollbar{
  width:4px;
}

.ss-mobile-drawer::-webkit-scrollbar-thumb{
  background:rgba(255,193,7,.35);
  border-radius:20px;
}

.ss-mobile-inner{
  padding:25px 22px 30px;
  min-height:100%;
  box-sizing:border-box;
}

/* HEADER */

.ss-mobile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:21px;
  border-bottom:1px solid rgba(255,255,255,.13);
}

.ss-mobile-logo{
  display:flex;
  align-items:center;
  min-width:0;
}

.ss-mobile-logo img{
  width:145px;
  max-width:48vw;
  height:auto;
  display:block;
  object-fit:contain;
}

.ss-mobile-close{
  width:42px;
  height:42px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
  flex:0 0 auto;
}

.ss-mobile-close:hover{
  background:rgba(255,255,255,.08);
}

.ss-mobile-close:active{
  transform:scale(.92);
}

.ss-mobile-close svg{
  width:25px;
  height:25px;
  stroke:currentColor;
}

/* TOP LEARNING CARD */

.ss-mobile-learning-card{
  margin:20px 0 22px;
  padding:17px 16px;
  min-height:82px;
  box-sizing:border-box;
  border-radius:18px;
  border:1px solid rgba(22,126,225,.55);
  background:
    linear-gradient(135deg,rgba(13,72,143,.70),rgba(6,39,76,.82));
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .2s ease,border-color .2s ease;
}

.ss-mobile-learning-card:active{
  transform:scale(.985);
}

.ss-mobile-learning-icon{
  width:50px;
  height:50px;
  border-radius:50%;
  flex:0 0 50px;
  border:1px solid rgba(35,145,255,.7);
  background:rgba(7,38,76,.78);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ss-mobile-learning-icon svg{
  width:27px;
  height:27px;
  stroke:#fff;
}

.ss-mobile-learning-copy{
  min-width:0;
  flex:1;
}

.ss-mobile-learning-copy strong{
  display:block;
  font-size:17px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.2px;
}

.ss-mobile-learning-copy strong span{
  color:#FFC107;
}

.ss-mobile-learning-copy small{
  display:block;
  margin-top:5px;
  color:#c7d7e8;
  font-size:12px;
  line-height:1.35;
}

.ss-mobile-arrow{
  width:22px;
  height:22px;
  flex:0 0 22px;
  color:#d8e8f7;
}

/* MENU */

.ss-mobile-menu{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.ss-mobile-item{
  min-height:67px;
  padding:7px 8px;
  box-sizing:border-box;
  border-radius:17px;
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:#f4f8fc;
  transition:background .2s ease,transform .2s ease;
}

.ss-mobile-item:hover{
  background:rgba(255,255,255,.055);
}

.ss-mobile-item:active{
  transform:scale(.985);
}

.ss-mobile-item.active{
  background:
    linear-gradient(100deg,rgba(22,103,203,.95),rgba(7,57,116,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 25px rgba(0,40,90,.22);
}

.ss-mobile-item-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:14px;
  background:rgba(255,255,255,.065);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ss-mobile-item.active .ss-mobile-item-icon{
  background:rgba(255,255,255,.08);
}

.ss-mobile-item-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:#e9f4ff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ss-mobile-item-label{
  flex:1;
  min-width:0;
  font-size:17px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:-.15px;
}

.ss-mobile-item-arrow{
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:#dceafa;
}

/* LOGIN */

.ss-mobile-login{
  margin-top:17px;
  width:100%;
  min-height:58px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-sizing:border-box;
  text-decoration:none;
  background:#FFC107;
  color:#071E3A;
  font-size:16px;
  font-weight:850;
  box-shadow:
    0 12px 28px rgba(255,193,7,.18),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .2s ease,filter .2s ease;
}

.ss-mobile-login:hover{
  filter:brightness(1.04);
}

.ss-mobile-login:active{
  transform:scale(.985);
}

.ss-mobile-login svg{
  width:24px;
  height:24px;
  stroke:#071E3A;
}

/* DIVIDER */

.ss-mobile-divider{
  height:1px;
  margin:23px 0 20px;
  background:rgba(255,255,255,.13);
}

/* SECOND CTA */

.ss-mobile-practice{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  min-height:92px;
  box-sizing:border-box;
  border:1px solid rgba(27,121,224,.55);
  border-radius:17px;
  background:linear-gradient(135deg,rgba(9,62,125,.68),rgba(5,34,70,.78));
  text-decoration:none;
  color:#fff;
}

.ss-mobile-practice-icon{
  width:50px;
  height:50px;
  border-radius:14px;
  background:rgba(16,96,183,.42);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 50px;
}

.ss-mobile-practice-icon svg{
  width:28px;
  height:28px;
  stroke:#fff;
}

.ss-mobile-practice-copy{
  flex:1;
  min-width:0;
}

.ss-mobile-practice-copy strong{
  display:block;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
}

.ss-mobile-practice-copy small{
  display:block;
  color:#b9cce0;
  margin-top:5px;
  font-size:12px;
  line-height:1.4;
}

/* SOCIAL */

.ss-mobile-social{
  padding-top:24px;
}

.ss-mobile-social-title{
  color:#c5d5e5;
  font-size:14px;
  font-weight:600;
  margin-bottom:13px;
}

.ss-mobile-social-row{
  display:flex;
  gap:10px;
}

.ss-mobile-social-row a{
  width:43px;
  height:43px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.07);
  text-decoration:none;
  transition:transform .2s ease,background .2s ease;
}

.ss-mobile-social-row a:active{
  transform:scale(.92);
}

.ss-mobile-social-row svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* FOOTER */

.ss-mobile-footer{
  padding-top:22px;
  padding-bottom:8px;
}

.ss-mobile-policy{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}

.ss-mobile-policy a{
  color:#aebfd0;
  font-size:11px;
  text-decoration:none;
}

.ss-mobile-policy span{
  color:#5d7186;
  font-size:11px;
}

.ss-mobile-copy{
  margin-top:13px;
  color:#8095aa;
  font-size:11px;
}

.ss-mobile-brand-line{
  margin-top:14px;
  color:#687f95;
  font-size:10px;
  letter-spacing:.35px;
}

/* BODY LOCK */

body.ss-mobile-menu-open{
  overflow:hidden !important;
}

/* Hide old mobile drawer when our new drawer is active */
body.ss-mobile-menu-ready .mobile-menu,
body.ss-mobile-menu-ready .mobile-drawer,
body.ss-mobile-menu-ready .mobile-nav-drawer,
body.ss-mobile-menu-ready .nav-drawer,
body.ss-mobile-menu-ready .mobile-sidebar{
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Desktop */
@media (min-width:769px){
  .ss-mobile-drawer,
  .ss-mobile-overlay{
    display:none !important;
  }
}

/* Small phones */
@media (max-width:380px){
  .ss-mobile-inner{
    padding-left:17px;
    padding-right:17px;
  }

  .ss-mobile-drawer{
    width:91vw;
  }

  .ss-mobile-item{
    min-height:61px;
  }

  .ss-mobile-item-label{
    font-size:16px;
  }

  .ss-mobile-learning-copy strong{
    font-size:15px;
  }
}