/* =========================================================
   JAYAN LABS
   GOOGLE PROFILE / AUTH UI
   iPHONE / macOS STYLE FROSTED GLASS
========================================================= */


/* =========================================================
   PROFILE WRAPPER
========================================================= */

.site-profile-wrap {
  position: relative;

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

  flex-shrink: 0;

  z-index: 10030;
}


/* =========================================================
   PROFILE BUTTON
   ALWAYS VISIBLE FROSTED PERSON ICON
========================================================= */

.site-profile-btn {
  position: relative;

  width: 38px;
  height: 38px;

  padding: 0;
  margin: 0;

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

  flex-shrink: 0;

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

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.105),
      rgba(255, 255, 255, 0.028)
    );

  color: #dbe7f8;

  cursor: pointer;

  overflow: hidden;

  isolation: isolate;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.018);

  backdrop-filter:
    blur(22px)
    saturate(155%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(155%);

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .25s ease,
    background .25s ease,
    box-shadow .3s ease;
}


/* =========================================================
   INNER GLASS HIGHLIGHT
========================================================= */

.site-profile-btn::before {
  content: "";

  position: absolute;

  top: -17px;
  left: 50%;

  width: 62px;
  height: 31px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255, 255, 255, .18),
      rgba(255, 255, 255, .045) 42%,
      transparent 72%
    );

  filter: blur(6px);

  pointer-events: none;

  z-index: 0;
}


/* =========================================================
   SUBTLE BOTTOM GLASS GLOW
========================================================= */

.site-profile-btn::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -18px;

  width: 42px;
  height: 28px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(126, 166, 255, .18),
      transparent 70%
    );

  filter: blur(7px);

  pointer-events: none;

  z-index: 0;
}


/* =========================================================
   HOVER
========================================================= */

.site-profile-btn:hover {
  transform:
    translateY(-2px)
    scale(1.025);

  border-color:
    rgba(190, 210, 255, .28);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .135),
      rgba(255, 255, 255, .038)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 11px 30px rgba(0, 0, 0, .25),
    0 0 24px rgba(116, 151, 255, .12);
}


/* =========================================================
   ACTIVE
========================================================= */

.site-profile-btn:active {
  transform:
    scale(.93);
}


/* =========================================================
   FOCUS
========================================================= */

.site-profile-btn:focus-visible {
  outline:
    2px solid rgba(138, 180, 255, .55);

  outline-offset:
    3px;
}


/* =========================================================
   DEFAULT PERSON ICON
   ALWAYS PRESENT
========================================================= */

.site-profile-default-icon {
  position: relative;

  left: auto;
  top: auto;

  width: 19px;
  height: 19px;

  display: block;

  transform: none;

  fill: none !important;

  stroke:
    url(#profileIconGradient);

  stroke:
    currentColor;

  stroke-width: 1.55;

  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: .96;

  pointer-events: none;

  z-index: 3;

  filter:
    drop-shadow(
      0 0 5px rgba(180, 205, 255, .16)
    );

  transition:
    opacity .22s ease,
    transform .22s ease;
}


/*
   IMPORTANT:
   The person icon remains visible even after
   Google login. Google image / initial never
   replaces the navbar icon.
*/

.site-profile-btn .site-profile-default-icon {
  display:
    block !important;

  visibility:
    visible !important;

  opacity:
    .96 !important;
}


/* =========================================================
   GOOGLE PROFILE IMAGE
   KEPT FOR INTERNAL AUTH STATE ONLY
========================================================= */

.site-profile-image {
  display:
    none !important;

  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}

.site-profile-image[hidden] {
  display:
    none !important;
}


/* =========================================================
   INITIAL
   NOT USED IN NAVBAR
========================================================= */

.site-profile-initial {
  display:
    none !important;

  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}

.site-profile-initial[hidden] {
  display:
    none !important;
}


/* =========================================================
   ONLINE STATUS
   ONLY WHEN LOGGED IN
========================================================= */

.site-profile-status {
  position:
    absolute;

  right:
    1px;

  bottom:
    1px;

  width:
    9px;

  height:
    9px;

  display:
    none;

  border:
    2px solid #10151f;

  border-radius:
    50%;

  background:
    #34a853;

  box-shadow:
    0 0 9px rgba(52,168,83,.72);

  z-index:
    8;

  pointer-events:
    none;

  animation:
    profileStatusPulse
    2s
    ease-in-out
    infinite;
}


/*
   Show status only when authenticated.
*/

.site-profile-wrap.logged-in
.site-profile-status {
  display:
    block;
}


@keyframes profileStatusPulse {

  0%,
  100% {
    transform:
      scale(.90);

    opacity:
      .75;
  }

  50% {
    transform:
      scale(1.10);

    opacity:
      1;
  }

}


/* =========================================================
   PROFILE CARD
========================================================= */

.site-profile-card {
  position:
    absolute;

  top:
    calc(100% + 12px);

  right:
    0;

  width:
    335px;

  max-width:
    min(
      335px,
      calc(100vw - 28px)
    );

  padding:
    11px;

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

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(
        29,
        35,
        48,
        .91
      ),
      rgba(
        10,
        14,
        21,
        .96
      )
    );

  backdrop-filter:
    blur(32px)
    saturate(155%);

  -webkit-backdrop-filter:
    blur(32px)
    saturate(155%);

  box-shadow:
    0 30px 90px
      rgba(
        0,
        0,
        0,
        .55
      ),
    0 10px 32px
      rgba(
        0,
        0,
        0,
        .28
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        .09
      );

  z-index:
    10040;

  transform-origin:
    top right;

  overflow:
    hidden;
}


/* =========================================================
   IMPORTANT CARD VISIBILITY FIX
========================================================= */

/*
   CLOSED = completely hidden.
   This was missing from the previous CSS and is why
   the profile card could remain permanently visible.
*/

.site-profile-wrap:not(.open)
.site-profile-card {
  display:
    none !important;

  visibility:
    hidden !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;
}


/*
   OPEN = visible.
*/

.site-profile-wrap.open
.site-profile-card {
  display:
    block !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  pointer-events:
    auto !important;

  animation:
    profileCardOpen
    .28s
    cubic-bezier(.16,1,.3,1);
}


.site-profile-card[hidden] {
  display:
    none !important;
}


.site-profile-card.hidden {
  display:
    none !important;
}


@keyframes profileCardOpen {

  from {
    opacity:
      0;

    transform:
      translateY(-7px)
      scale(.97);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   LOGGED OUT
========================================================= */

.site-login-area {
  width:
    100%;

  padding:
    13px;
}

.site-auth-content {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;
}

.site-auth-orb {
  position:
    relative;

  width:
    54px;

  height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    3px auto 14px;

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

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        .075
      ),
      rgba(
        255,
        255,
        255,
        .018
      )
    );

  box-shadow:
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        .07
      );
}

.site-auth-orb::before {
  content:
    "";

  position:
    absolute;

  width:
    27px;

  height:
    27px;

  border-radius:
    50%;

  background:
    conic-gradient(
      #4285f4,
      #9b51e0,
      #ea4335,
      #fbbc05,
      #4285f4
    );

  filter:
    blur(7px);

  opacity:
    .40;

  animation:
    authOrbSpin
    5s
    linear
    infinite;
}

.site-auth-orb svg {
  position:
    relative;

  z-index:
    2;

  width:
    21px;

  height:
    21px;

  fill:
    none;

  stroke:
    #9ab6ec;

  stroke-width:
    1.6;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

@keyframes authOrbSpin {

  to {
    transform:
      rotate(360deg);
  }

}

.site-login-title {
  color:
    #edf3fa;

  font-size:
    16px;

  font-weight:
    650;

  letter-spacing:
    -.35px;
}

.site-login-subtitle {
  max-width:
    255px;

  margin:
    7px auto 17px;

  color:
    #738096;

  font-size:
    9px;

  line-height:
    1.7;
}

.site-google-button-wrap {
  width:
    100%;

  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border-radius:
    12px;
}


/* =========================================================
   LOGGED IN
========================================================= */

#site-profile-logged-in {
  width:
    100%;
}

#site-profile-logged-in[hidden] {
  display:
    none !important;
}

.site-profile-header {
  padding:
    13px 12px 15px;

  text-align:
    center;
}

.site-profile-large {
  position:
    relative;

  width:
    72px;

  height:
    72px;

  margin:
    0 auto 13px;

  padding:
    2px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #4285f4,
      #9b51e0,
      #ea4335,
      #fbbc05,
      #4285f4
    );

  box-shadow:
    0 0 26px
      rgba(
        66,
        133,
        244,
        .14
      );

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.site-profile-card:hover
.site-profile-large {
  transform:
    scale(1.035);

  box-shadow:
    0 0 30px
      rgba(
        66,
        133,
        244,
        .18
      );
}

.site-profile-large-inner {
  width:
    68px;

  height:
    68px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 30% 20%,
      #2a3650,
      #111620 72%
    );

  color:
    #ffffff;

  font-size:
    24px;

  font-weight:
    650;

  box-shadow:
    inset 0 1px 2px
      rgba(
        255,
        255,
        255,
        .08
      );
}

.site-profile-large-inner img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  border-radius:
    50%;

  display:
    block;
}

.site-profile-name {
  color:
    #f1f5fa;

  font-size:
    15px;

  font-weight:
    650;

  margin-bottom:
    4px;
}

.site-profile-email {
  color:
    #77869c;

  font-size:
    10px;

  word-break:
    break-word;
}

.site-profile-state {
  width:
    fit-content;

  max-width:
    100%;

  margin:
    9px auto 0;

  padding:
    5px 9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  border:
    1px solid
    rgba(
      52,
      168,
      83,
      .12
    );

  border-radius:
    999px;

  background:
    rgba(
      52,
      168,
      83,
      .055
    );

  color:
    #83d39b;

  font-size:
    8px;

  font-weight:
    600;
}

.site-profile-state-dot {
  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    #34a853;

  box-shadow:
    0 0 8px
      rgba(
        52,
        168,
        83,
        .70
      );

  animation:
    stateDotPulse
    1.8s
    ease-in-out
    infinite;
}

@keyframes stateDotPulse {

  0%,
  100% {
    opacity:
      .7;

    transform:
      scale(.9);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.15);
  }

}


/* =========================================================
   DIVIDER
========================================================= */

.site-profile-divider {
  width:
    100%;

  height:
    1px;

  margin:
    0 0 9px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        .08
      ),
      transparent
    );
}


/* =========================================================
   ACCOUNT ACTIONS
========================================================= */

.site-account-actions {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  padding:
    0 3px;
}

.site-account-action {
  position:
    relative;

  width:
    100%;

  min-height:
    41px;

  padding:
    0 11px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid
    transparent;

  border-radius:
    12px;

  background:
    transparent;

  color:
    #cbd6e6;

  cursor:
    pointer;

  text-align:
    left;

  transition:
    background .22s ease,
    border-color .22s ease,
    transform .22s ease,
    color .22s ease;
}

.site-account-action:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(
      255,
      255,
      255,
      .065
    );

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

  color:
    #f1f5fb;
}

.site-account-action svg {
  width:
    17px;

  height:
    17px;

  flex:
    0 0 17px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  opacity:
    .82;
}

.site-account-action span {
  font-size:
    9px;

  font-weight:
    600;
}

.site-account-action.danger {
  color:
    #bf7f87;
}

.site-account-action.danger:hover {
  color:
    #ff8c98;

  border-color:
    rgba(
      255,
      90,
      105,
      .10
    );

  background:
    rgba(
      255,
      90,
      105,
      .055
    );
}


/* =========================================================
   PROFILE FOOTER
========================================================= */

.site-profile-footer {
  padding:
    10px 11px 4px;

  color:
    #536176;

  font-size:
    7px;

  line-height:
    1.5;

  text-align:
    center;
}


/* =========================================================
   GOOGLE BUTTON SAFETY
========================================================= */

.site-google-button-wrap iframe {
  display:
    block;

  max-width:
    100%;

  border:
    0;

  border-radius:
    12px;
}


/* =========================================================
   HIDDEN SAFETY
========================================================= */

[hidden] {
  display:
    none !important;
}


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

@media (max-width: 700px) {

  .site-profile-btn {
    width:
      37px;

    height:
      37px;
  }

  .site-profile-card {
    top:
      calc(
        100% + 10px
      );

    right:
      -2px;

    width:
      min(
        320px,
        calc(
          100vw - 22px
        )
      );

    border-radius:
      21px;
  }

}


@media (max-width: 430px) {

  .site-profile-btn {
    width:
      35px;

    height:
      35px;
  }

  .site-profile-default-icon {
    width:
      17px;

    height:
      17px;
  }

  .site-profile-status {
    width:
      9px;

    height:
      9px;
  }

}