/* ============================================================
   TALER SHARED USER MENU + FOOTER
   ============================================================ */


/* =========================
   USER DROPDOWN
   ========================= */

.user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  border: 0;
  padding: 8px 0;

  background: transparent;
  color: #aeb6d0;

  font: inherit;
  font-size: 13px;

  cursor: pointer;
}

.user-menu-trigger:hover,
.user-menu.is-open .user-menu-trigger {
  color: #fff;
}

.user-menu-chevron {
  font-size: 9px;
  opacity: .7;
  transition: transform .18s ease;
}

.user-menu.is-open .user-menu-chevron {
  transform: rotate(180deg);
}

.user-menu-dropdown {
  position: absolute;

  top: calc(100% + 13px);
  left: 50%;

  width: 255px;

  padding: 8px;

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

  transform:
    translateX(-50%)
    translateY(-6px);

  border: 1px solid rgba(124,101,255,.20);
  border-radius: 14px;

  background:
    rgba(10,13,29,.98);

  box-shadow:
    0 20px 55px rgba(0,0,0,.38);

  backdrop-filter: blur(18px);

  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility .16s ease;

  z-index: 10000;
}

.user-menu.is-open .user-menu-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateX(-50%)
    translateY(0);
}

.user-menu-dropdown a {
  display: flex !important;
  align-items: center !important;

  min-height: 39px !important;

  padding: 9px 11px !important;

  border-radius: 9px !important;

  color: #aeb6d0 !important;

  font-size: 12px !important;

  text-decoration: none !important;
}

.user-menu-dropdown a:hover {
  background:
    rgba(116,88,255,.10) !important;

  color: #fff !important;
}


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

.site-footer {
  position: relative;

  width: 100%;

  margin-top: 64px;

  border-top:
    1px solid rgba(122,102,255,.14);

  background:
    linear-gradient(
      180deg,
      #070914 0%,
      #050711 100%
    );

  color: #fff;
}

.site-footer::before {
  content: "";

  position: absolute;

  top: 0;
  left: 8%;
  right: 8%;

  height: 1px;

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

.site-footer-inner {
  width: min(1180px, calc(100% - 40px));

  margin: 0 auto;

  padding:
    34px 0
    24px;
}

.footer-main {
  display: grid;

  grid-template-columns:
    minmax(260px,1.15fr)
    minmax(420px,1fr);

  gap: 60px;

  align-items: start;
}

.footer-brand-row {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;
}

.footer-logo-mark {
  width: 27px;
  height: 27px;

  flex: 0 0 27px;
}

.footer-brand-name {
  color: #f4f5ff;

  font-size: 19px;
  font-weight: 800;

  letter-spacing: -.02em;
}

.footer-description {
  max-width: 480px;

  color: #737d9b;

  font-size: 11px;
  line-height: 1.65;
}

.footer-column-title {
  margin-bottom: 12px;

  color: #656f8c;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 8px 18px;
}

.footer-links a {
  color: #a0a9c2;

  font-size: 11px;

  text-decoration: none;

  transition: color .15s ease;
}

.footer-links a:hover {
  color: #fff;
}


/* company info */

.footer-company {
  display: grid;

  grid-template-columns:
    1.25fr
    1.7fr
    1fr;

  gap: 18px 36px;

  margin-top: 27px;
  padding-top: 22px;

  border-top:
    1px solid rgba(255,255,255,.055);
}

.footer-company-block {
  color: #68728f;

  font-size: 10px;
  line-height: 1.65;
}

.footer-company-block strong {
  display: block;

  margin-bottom: 3px;

  color: #8d96b1;

  font-size: 10px;
  font-weight: 650;
}

.footer-company a {
  color: #858fac;

  text-decoration: none;
}

.footer-company a:hover {
  color: #fff;
}


/* bottom */

.footer-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 22px;
  padding-top: 18px;

  border-top:
    1px solid rgba(255,255,255,.04);

  color: #505a76;

  font-size: 9px;
}

.footer-bottom-note {
  max-width: 650px;

  text-align: right;
}


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

@media (max-width: 800px) {

  .footer-main {
    grid-template-columns: 1fr;

    gap: 26px;
  }

  .footer-company {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .footer-bottom {
    align-items: flex-start;

    flex-direction: column;
  }

  .footer-bottom-note {
    text-align: left;
  }

}


@media (max-width: 720px) {

  .site-footer {
    margin-top: 42px;
  }

  .site-footer-inner {
    width: calc(100% - 28px);

    padding-top: 28px;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .user-menu-dropdown {
    left: auto;
    right: 0;

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

    transform:
      translateY(-6px);
  }

  .user-menu.is-open .user-menu-dropdown {
    transform:
      translateY(0);
  }

}

/* ============================================================
   MOBILE USER SUBMENU
   ============================================================ */

.mobile-user-menu {
  width: 100%;
}

.mobile-user-menu-trigger {
  width: 100%;

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

  padding: 12px 0;

  border: 0;

  background: transparent;

  color: #f3f5ff;

  font: inherit;
  font-size: 14px;
  font-weight: 650;

  cursor: pointer;
}

.mobile-user-menu-chevron {
  color: #7d86a4;
  font-size: 11px;

  transition: transform .18s ease;
}

.mobile-user-menu.is-open
.mobile-user-menu-chevron {
  transform: rotate(180deg);
}

.mobile-user-menu-dropdown {
  display: none;

  padding:
    4px 0
    8px 12px;
}

.mobile-user-menu.is-open
.mobile-user-menu-dropdown {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.mobile-user-menu-dropdown a {
  display: block !important;

  padding:
    9px 10px !important;

  border-radius:
    9px !important;

  color:
    #9099b5 !important;

  font-size:
    12px !important;

  text-decoration:
    none !important;
}

.mobile-user-menu-dropdown a:hover {
  background:
    rgba(115,88,255,.08) !important;

  color:
    #fff !important;
}

@media (min-width: 769px) {
  .mobile-user-menu {
    display: none !important;
  }
}

/* ============================================================
   MOBILE FOOTER — LEFT ALIGN
   ============================================================ */

@media (max-width: 720px) {

  .site-footer,
  .site-footer-inner,
  .footer-main,
  .footer-main > div,
  .footer-brand-row,
  .footer-description,
  .footer-column-title,
  .footer-links,
  .footer-company,
  .footer-company-block,
  .footer-bottom,
  .footer-bottom-note {
    text-align: left !important;
  }

  .site-footer-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;

    width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .footer-brand-row {
    justify-content: flex-start !important;
  }

  .footer-main {
    justify-items: start !important;
  }

  .footer-links {
    justify-items: start !important;
    align-items: start !important;

    width: 100% !important;
  }

  .footer-links a {
    width: fit-content !important;

    text-align: left !important;
  }

  .footer-company {
    justify-items: start !important;
  }

  .footer-company-block {
    width: 100% !important;

    text-align: left !important;
  }

  .footer-bottom {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .footer-bottom-note {
    max-width: 100% !important;

    text-align: left !important;
  }

}


/* ============================================================
   MOBILE FOOTER — LEFT ALIGN
   ============================================================ */

@media (max-width: 720px) {

  .site-footer,
  .site-footer-inner,
  .footer-main,
  .footer-main > div,
  .footer-brand-row,
  .footer-description,
  .footer-column-title,
  .footer-links,
  .footer-company,
  .footer-company-block,
  .footer-bottom,
  .footer-bottom-note {
    text-align: left !important;
  }

  .site-footer-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;

    width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .footer-brand-row {
    justify-content: flex-start !important;
  }

  .footer-main {
    justify-items: start !important;
  }

  .footer-links {
    justify-items: start !important;
    align-items: start !important;

    width: 100% !important;
  }

  .footer-links a {
    width: fit-content !important;

    text-align: left !important;
  }

  .footer-company {
    justify-items: start !important;
  }

  .footer-company-block {
    width: 100% !important;

    text-align: left !important;
  }

  .footer-bottom {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .footer-bottom-note {
    max-width: 100% !important;

    text-align: left !important;
  }

}


/* ============================================================
   REAL STAGGERED MOBILE USER MENU
   ============================================================ */

@media (max-width: 768px) {

  .sm-panel-user {
    display: block;
    width: 100%;
  }

  .sm-panel-user-trigger {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    border: 0 !important;
    padding: .5rem 0 !important;

    background: transparent !important;

    color: #fff !important;

    font-family: inherit !important;
    font-size: 1.35rem !important;
    font-weight: 500 !important;

    text-align: left !important;
    text-transform: uppercase !important;

    letter-spacing: -.5px !important;

    cursor: pointer !important;
  }

  .sm-panel-user-trigger:hover {
    color: #8d70ff !important;
  }

  .sm-panel-user .mobile-user-menu-chevron {
    flex: 0 0 auto;

    margin-left: 14px;

    color: #777f9c;

    font-size: 13px;

    transition: transform .18s ease;
  }

  .sm-panel-user.is-open
  .mobile-user-menu-chevron {
    transform: rotate(180deg);
  }


  /* submenu */

  .sm-panel-user
  .mobile-user-menu-dropdown {
    display: none;

    flex-direction: column;

    gap: 2px;

    margin:
      5px 0
      11px 0;

    padding:
      8px 0
      8px 14px;

    border-left:
      1px solid
      rgba(126,103,255,.25);
  }

  .sm-panel-user.is-open
  .mobile-user-menu-dropdown {
    display: flex !important;
  }

  .sm-panel-user
  .mobile-user-menu-dropdown a {
    display: block !important;

    padding:
      8px 10px !important;

    border-radius:
      8px !important;

    color:
      #929bb7 !important;

    font-size:
      12px !important;

    font-weight:
      500 !important;

    line-height:
      1.25 !important;

    text-transform:
      none !important;

    letter-spacing:
      0 !important;

    text-decoration:
      none !important;
  }

  .sm-panel-user
  .mobile-user-menu-dropdown a:hover {
    background:
      rgba(115,88,255,.09) !important;

    color:
      #fff !important;
  }

}