.vp-auth-drawer{
  position:fixed;
  inset:0;

  z-index:999999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  overflow-y:auto;
  overflow-x:hidden;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .28s ease,
    visibility .28s ease;
}

.vp-auth-drawer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


/* =========================================================
   VP FAB
========================================================= */

.vp-auth-fab{
  position:fixed;

  top:18px;

  left:calc(50% - 380px);

  z-index:1000;
}


.vp-auth-fab__btn{
  width:54px;
  height:54px;

  border:none;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  position:relative;

  transition:
    transform .28s ease,
    background .28s ease,
    box-shadow .28s ease;

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  overflow:hidden;
}



/* FREE */

.vp-auth-fab__btn.is-free{
  background:
    linear-gradient(
      135deg,
      rgba(25,25,35,.88),
      rgba(12,12,18,.92)
    );

  border:1px solid rgba(0,255,255,.16);

  box-shadow:
    0 10px 30px rgba(0,0,0,.24),
    0 0 18px rgba(0,255,255,.08);
}

/* PRO */

.vp-auth-fab__btn.is-pro{
  background:
    rgba(18,18,22,.72);

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
    0 10px 30px rgba(0,0,0,.18);
}

.vp-auth-fab__btn:hover{
  transform:translateY(-2px) scale(1.03);
}


/* Mobile */

@media (max-width: 768px){

  .vp-auth-fab{
    top:18px;
    left:20px;
  }

  .vp-auth-fab__btn{
    width:50px;
    height:50px;
  }

  
}

.vp-auth-fab{
  opacity:0;
  transform:
    translateY(14px)
    scale(.92);

  animation:
    vpAuthFabIn .55s cubic-bezier(.22,1,.36,1)
    forwards;

  animation-delay:.35s;
}

@keyframes vpAuthFabIn{

  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}

.vp-auth-fab__btn{

  

  box-shadow:
    0 10px 30px rgba(0,0,0,.22);

  transition:
  transform .62s cubic-bezier(.22,1,.36,1),
  opacity .38s ease,
  box-shadow .22s ease,
  background .22s ease;
}

.vp-auth-fab__btn::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  z-index:0;
}

.vp-auth-fab__btn > *{
  position:relative;
  z-index:1;
}

.vp-auth-fab__btn:hover{

  transform:
    translateY(-2px)
    scale(1.04);

  box-shadow:
    0 16px 40px rgba(0,0,0,.28);

  filter:
    brightness(1.06);
}

.vp-auth-fab__btn:active{

  transform:
    scale(.96);
}

/* =========================================================
   DRAWER
========================================================= */

.vp-auth-open{
  overflow:hidden;
}



/* BACKDROP */

.vp-auth-drawer__backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(0,0,0,.62);

  backdrop-filter:blur(8px);

  opacity:0;

  transition:
    opacity .28s ease;
}

/* PANEL */

.vp-auth-drawer__panel{
  position:relative;
  
  padding-top:24px;

  width:100%;

  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);

  background-color:transparent;

  overflow-y:auto;
  overflow-x:hidden;

  border-radius:28px;

  z-index:2;

  -webkit-overflow-scrolling:touch;

  overscroll-behavior:contain;
}

.vp-auth-drawer .vp-access{
  background: #111;
}


/* OPEN */

.vp-auth-drawer.is-open
.vp-auth-drawer__backdrop{
  opacity:1;
}

.vp-auth-drawer.is-open
.vp-auth-drawer__panel{
  transform:
    translateY(0);
}


/* CLOSE BTN */

.vp-auth-drawer__close{
  position:absolute;

  top:10px;
  right: 20px;

  width:42px;
  height:42px;

  border:none;
  border-radius:999px;

  background: #111;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;

  cursor:pointer;

  z-index:20;
}

@media (max-width: 768px){

  .vp-auth-drawer__close{
    right:1px;
    top:10px;
  }

}


.vp-auth-drawer__shell{
  position:relative;

  width:min(100%, 520px);

  margin:auto;

  z-index:2;
}


/* =========================================
   AUTH DRAWER TITLES
========================================= */

.vp-auth-drawer__intro h2{
  margin: 0 0 14px;

  color: #ffffff !important;

  font-weight: 400;
  line-height: .92;

  letter-spacing: -0.04em;

  text-transform: uppercase;

  font-size: clamp(42px, 3vw, 72px);

  text-align: center;

  opacity: 1 !important;

  text-shadow:
    0 8px 30px rgba(0,0,0,.45);
}

.vp-auth-drawer__intro p{
  margin: 0;

  color: rgba(255,255,255,.82);

  font-size: 16px;

  line-height: 1.6;

  text-align: center;
}

/* Mobile polish */
@media (max-width: 768px){

  .vp-auth-drawer__intro h2{
    font-size: 44px;
  }

  .vp-auth-drawer__intro p{
    font-size: 15px;
  }

}



.vp-auth-drawer__close-icon{
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}




/* =========================================
   AUTH DRAWER TABS
========================================= */

.vp-auth-tabs{
  display:flex;

  gap:10px;

  margin-bottom:26px;
}

.vp-auth-tab-btn{
  flex:1;

  min-height:56px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  padding:10px 14px;

  border:none;
  border-radius:999px;

  background:
    rgba(255,255,255,.08);

  color:
    rgba(255,255,255,.72);

  font-size:14px;
  font-weight:700;
  line-height:1.15;

  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.vp-auth-tab-btn:hover{
  transform:translateY(-1px);
}

.vp-auth-tab-btn.active{
  background:#fff;
  color:#111;
}

.vp-auth-tab-content{
  display:none;
}

.vp-auth-tab-content.active{
  display:block;
}

.vp-auth-fab__logo{
  width:26px !important;
  height:26px !important;

  min-width:48px;
  min-height:48px;

  max-width:none !important;

  display:block;

  object-fit:contain;

  flex-shrink:0;

  pointer-events:none;
}



.vp-auth-fab.is-hidden .vp-auth-fab__btn{

  opacity:.02;

  transform:
    translateY(-84px)
    scale(.92);
}

/* =====================================
REGISTER STATES
===================================== */

.vp-register-pending-state {

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 24px;

  padding: 32px 36px;

  border-radius: 28px;

  background:
    rgba(255,255,255,0.02);

  border:
    1px solid rgba(255,255,255,0.06);

  margin-top: 20px;

  text-align: left;

}

.vp-auth-success-icon {

  width: 72px;
  height: 72px;

  min-width: 72px;

  border-radius: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 34px;

  color: #5de1ff;

  background:
    rgba(93,225,255,0.08);

  border:
    1px solid rgba(93,225,255,0.18);

}

.vp-register-pending-state-content {
    
  flex: 1;

  min-width: 0;    

  display: flex;
  flex-direction: column;

  gap: 10px;

}

.vp-register-pending-state h3 {

  margin: 0;

  color: #ffffff;

  font-size: 20px;

  line-height: 1.05;

  font-weight: 800;

  letter-spacing: -0.03em;

  white-space: normal;

  overflow-wrap: anywhere;

}

.vp-auth-success-text {

  margin: 0;

  color:
    rgba(255,255,255,0.72);

  font-size: 14px;

  line-height: 1.6;

  max-width: 540px;

}

/* =====================================
MOBILE
===================================== */

@media (max-width: 768px) {

  .vp-register-pending-state {

    flex-direction: column;

    text-align: center;

    align-items: center;

    padding: 26px 22px;

    gap: 18px;

  }

  .vp-auth-success-icon {

    width: 68px;
    height: 68px;

    min-width: 68px;

    border-radius: 20px;

    font-size: 30px;

  }

  .vp-register-pending-state-content {

    align-items: center;

  }

  .vp-register-pending-state h3 {

    font-size: 19px;

    line-height: 1.1;

    white-space: nowrap;

  }

  .vp-auth-success-text {

    font-size: 14px;

    line-height: 1.7;

    max-width: 100%;

  }

}