
/* CZESTI_ADMIN_ORB_V2 */

.cz-admin-orb {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 10000;

  display: flex;
  align-items: center;
  gap: 11px;

  padding: 8px 15px 8px 8px;
  border: 1px solid rgba(224, 180, 101, .72);
  border-radius: 999px;

  background: rgba(17, 26, 35, .96);
  color: #f6f1e7;
  text-decoration: none !important;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .08);

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

.cz-admin-orb:hover {
  transform: translateY(-2px);
  border-color: #f2d294;
  background: #25303b;
}

.cz-admin-orb:focus-visible {
  outline: 3px solid #f2d294;
  outline-offset: 3px;
}

.cz-admin-orb-icon {
  display: grid;
  place-items: center;

  width: 56px;
  height: 56px;
  flex: 0 0 56px;

  border-radius: 50%;
  border: 1px solid rgba(230, 185, 113, .56);

  background:
    radial-gradient(
      circle at 35% 30%,
      #59412f,
      #21202b 70%
    );

  overflow: hidden;
}

.cz-admin-orb-icon img {
  display: block;
  width: 49px;
  height: 49px;
  object-fit: contain;
  image-rendering: pixelated;
}

.cz-admin-orb-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.cz-admin-orb-copy small {
  color: #b4c1cd;
  font-size: 10px;
  letter-spacing: .17em;
  font-weight: 800;
}

.cz-admin-orb-copy strong {
  color: #9fe0ad;
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 700px) {
  .cz-admin-orb {
    top: 9px;
    right: 9px;
    gap: 7px;
    padding: 5px 9px 5px 5px;
  }

  .cz-admin-orb-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .cz-admin-orb-icon img {
    width: 37px;
    height: 37px;
  }

  .cz-admin-orb-copy strong {
    font-size: 11px;
  }

  .cz-admin-orb-copy small {
    font-size: 9px;
  }
}
